当前位置： 移动技术网 > IT编程>网页制作>HTML > 荐 CSS入门小结

荐 CSS入门小结

2020年07月12日  | 移动技术网IT编程  | 我要评论

目录

css2总结

什么是css？

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

css语法

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。

  • 每条声明由一个属性和一个值组成。

  • 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

语法

css常用选择器

基本选择器

1、id 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  • HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
  • 以下的样式规则应用于元素属性 id=“para1”:
<style>
#para1
{
    text-align:center;
    color:red;
}
</style>
<div id="paral">id</div>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。!!!

2、class 选择器

  • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  • class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
  • 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<style>
.center {text-align:center;}
</style>
<div class="center">class</div>

3、标签选择器

也叫类型选择器，或叫元素选择器

  • 你也可以指定特定的HTML元素使用class。
    在以下实例中, 所有的 p 元素使用让该标签的文本居中:
<style>
p.center {text-align:center;}
</style>
<p>class</p>
<p>class</p>
<p>class</p>
<p>class</p>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。！！！

4、通配符选择器

  • 使用通配符，*，表示所有的标签（元素）。
  • 经典应用：
    使用*来去掉所有标签的margin和padding。
*{
margin:0;
padding:0;
}

高级选择器

1、后代选择器

  • E F 后代选择器
    匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。
<style>
div ul li {width:100px; height:100px;}<br>//匹配到div下面的所有ul，且ul的所有后代li
</style>
<div>
　　<ul>
　　　　<li></li>
　　　　<li></li>
    </ul>
</div>

2、多元素选择器

  • E,F 多元素选择器
    同时匹配到E元素和F元素，用逗号隔开。
<style>
div,#box{width:100px; height:100px; background:#000;}//同时匹配到下文中的div标签和id为box的p标签
</style>
<div></div>
<p id="box"></p>

3、伪类选择器

（1）;link 匹配所有未被点击的链接

a:link{ color: green; }

（2）:hover 匹配鼠标悬停在其上的元素

a:hover{ color: gold; }

（3）:active 匹配鼠标按下还没有释放的元素

a:active{ color: blue; }

（4）:visited 匹配所有已经被点击的链接

a:visited{ color: red; }

引入css文件的三种方式

1、行内样式

就是直接在标签的开始标签中，使用style属性，如图：
1

2、内部样式

  • 直接使用style标签来完成，注意，style标签要写在head部分，不要写到body里面了。
    在heed部分，添加style标签，如下：
    2

3、外部样式

分两步：
① 将css作为一个独立的文件来保存，一般后缀.css
3
② 使用link标签引入
4

css三大属性

继承性

  • 说明
  • 因为css具有继承性，所以在可以body里面设置字体等此网页中常用的属性，这样可以极大程度的简化的编写。
  • 继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，就是特定的CSS属性向下传递到子孙元素。
  • 举例
    6
  • 注意：

并不是所有的css属性都可以继承
可以继承的常见属性有：
font-family,font-size,font-style,font-weight,font, line-height,text-align,text-indent,color

层叠性

  • 说明

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。
在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

  • 举例
    下面代码，出现一个div 标签指定了相同样式不同值的情况，这就是样式冲突。
div{
    color:red;
}
div{
    color:blue;
}
  • 规则

通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。
样式不冲突，不会层叠。
样式冲突，遵循就近原则。 长江后浪推前浪，后面样式盖前面。

优先级

在复杂CSS样式表，往往并不是相同样式不同值的堆叠这么简单，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。

处理优先级问题，就是考虑样式权重的高低。这里介绍一些特殊的情况：

1、继承样式的权重为0。也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。

2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

4、CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

  • 用权重计算css的优先级
    值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
    7
  • 总结优先级

!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器

1、使用了 !important声明的规则。
2、内嵌在 HTML 元素的 style属性里面的声明。
3、使用了 ID 选择器的规则。
4、使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5、使用了元素选择器的规则。
6、使用了通配符的规则。
7、同一类选择器则遵循就近原则。

css盒子模型

  • 简介
    网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型
  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。box

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。

填充（padding）

填充是内容区和边框之间的空间。
填充的属性有五种 ，即
padding -top
padding -bottom
padding -left
padding-right
以及综合了以上四种方向的快捷填充属性padding。
使用这五种属性可以指定内容区信息内容与各方向边框间的距离。
设置盒子背景色属性时，可使背景色延伸到填充区域。

边框（border）

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、**solid(实线)**等九种边框样式。

使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。

使用border-color属性可以为边框指定相应的颜色，其属性值可以是rgb值，也可以是CSS 规定的17个颜色名 。

在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border-top: 2px solid green 或border-top-style: solid、border-left-color: red等。

注意：

设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果 。

空白边（margin）

空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。

空白边的属性有五种 ，即
margin-top
margin-bottom
margin- left
margin-right
以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。

对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。

同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。

css元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块状元素(又叫行内块元素)

元素分类–块级元素

什么是块级元素？在html中<div> <p> <hn> <from> <ul> 和 <li> 就是块级元素。

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类–内联元素（行内元素）

在html中，<span> 、<a> 、<lable> 、 <strong> 和<em> 就是典型的内联元素（行内元素）（inline）元素。当然块级元素也可以通过代码display:inline将元素设置为内联元素（行内元素）。

如下代码就是将块状元素div转换为内联元素（行内元素），从而使 div 元素具有内联元素（行内元素）特点。

<style>
 div{
     display:inline;
 }
 </style>
<div>我要变成内联元素</div>

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

元素分类–内联块状元素（行内块元素）

内联块状元素（行内块元素（inline-block）就是同时具备内联元素、块级元素的特点，代码display:inline-block就是将元素设置为内联块状元素（行内块元素）。

<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
可以通过修改display属性来切换块级元素和行内元素

css属性

  • css属性很多，但常用的基本就二十多个
    在这里插入图片描述

  • 1、边框修饰：border

border------>top，bottom，left，right上下左右边框
分为：color，类型style{ groove，dashed，ridge，solid}
一个值------->四个边 二个值------->上下 左右 三个值------->上 左右 下 四个值-------->上 右 下 左(顺时针)

  • 2、文字修饰：font

color: red;/字体颜色
font-size: 30px; /字体大小 默认字体大小是16px
font-family: “微软雅黑”; /字体
font-weight: bolder; /字体粗细 lighter normal bold
font-style: italic; /字体类型

  • 3、文本修饰：text

text-align: center; /文本对齐方式/left、right
text-decoration: underline; /文本描述
text-indent: 20px; /em 字符单位 px像素单位/首行缩进
text-indent: 2em; /2em在默认情况下是32px
text-shadow: 5px 5px 2px yellow;/ 文本投影
投影 水平距离 垂直 模糊程度 颜色

  • 4、多行文本溢出隐藏

overflow: hidden;------>/溢出隐藏
text-overflow: ellipsis;------> /溢出内容以省略号的形式显示

  • 5、一行文本的溢出

overflow: hidden;/隐藏超出部分
text-overflow: ellipsis;显示省略符号来代表被修剪的文本。
div里面title属性可以隐藏文本。word-break：break-word------>自动换行
line-height------>行高
letter-spacing------>字间距。
text-align: justify;------>两端分散对齐。
text-align-last: justify;------>最后一行两端分散对齐。

  • 6、背景修饰：background

background-color: red;------>/背景颜色 默认值 transparent
background-image:url(猫.jpg);------>/背景图片 默认值none
/背景图片优于背景颜色显示
background-repeat: no-repeat;------>/定义背景图片是否重复 默认值repeat repeat-(x/y)
background-position:right 20px bottom 20px;------>/ 写了一个方向的位置移动 另一个方向默认居中
background-position: center;------> /背景图片位置 默认left top
background-size: 500px 500px;------> /背景图片大小

  • 7、盒子属性：margin值 盒子与盒子之间的距离

margin 0 auto水平居中 margin-top/bottom/right/left
padding值“设置内容与边框的距离”
一般*{
margin 0；
padding 0；重置盒子的自带属性值。
}
边界溢出 第一个子元素的上边界 最后一个的下边界 溢出父元素。
解决办法：
height: 500px;/加高度第一种对象是父元素。
overflow: hidden;/第二种
padding: 1px;/第三种
上下边界合并 取大值。

  • 8、转换盒子属性：

display: inline-block; /元素转为行内块元素
display: block;/元素转为块级元素

  • 9、颜色表示方法：

1、英文 不透明
background: red;
2、十六进制(兼容好) 不透明
background: #ff0000;
#+(0-9)(a-f)
3、rgba 透明
background: rgba(255,0,0,1);
r 红色 0-255
b 蓝色 0-255
g 绿色 0-255
a 透明度 0-1之间的小数

  • 12、盒子自带属性：

span,i{ 盒子属性失效 对行标签
display: block; 行元素转换成块元素

  • 13、浮动坍塌：

解决:子元素浮动了就给父元素加上。
1.给父元素设置高度
2.overflow:hidden;

本文地址：https://blog.csdn.net/xing_kai_kai/article/details/107266864

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网