HTML中引入CSS的三种方式
行内样式:
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>
内部样式:
<style>
h1{color: green; }
</style>
外部样式:
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
CSS的选择器
CSS的基本选择器
标签选择器
类选择器
ID选择器
CSS的高级选择器
层次选择器
结构伪类选择器
属性选择器
CSS的基本选择器
1:标签选择器:HTML标签作为标签选择器的名称
语法:
![](https://i-blog.csdnimg.cn/blog_migrate/fc00fe4132eea7b0a03386ebe0e758b8.png)
2:类选择器
![](https://i-blog.csdnimg.cn/blog_migrate/741b1b8d56797234e87bb26e35c33851.png)
3:ID选择器
![](https://i-blog.csdnimg.cn/blog_migrate/16a0d353b8f7b78ebac16b9ae7516b33.png)
层次选择器
选择器 | 类 型 | 功能描述 |
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 |
E~F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
后代选择器
语法:
body p{ background: red; }
注意:后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入;
子选择器
body>p{ background: pink; }
相邻兄弟选择器
.active+p { background: green; }
通用兄弟选择器
.active~p{ background: yellow; }
结构伪类选择器
选择器 | 功能描述 |
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
属性选择器
属性选择器 | 功能描述 |
E[attr] | 选择匹配具有属性attr的E元素 |
E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写) |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串 |
E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配 |
E[attr]属性选择器
a[id] { background: yellow; }
E[attr=val]属性选择器
a[id=first] { background: red; }
注意:
E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中
E[attr^=val]属性选择器
a[href^=http] { background: red; }
E[attr$=val]属性选择器
a[href$=png] { background: red; }
E[attr*=val]属性选择器
a[class*=links] { background: red; }
<span>标签
作用:
能让某几个文字或者某个词语凸显出来
字体样式
属性 | 含义 | 示例 |
font-family | 设置字体类型 | font-family:"隶书"; |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体风格 | font-style:italic; |
font-weight | 设置字体的粗细 | font-weight:bold; |
font | 在一个声明中设置所有字体属性 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型 | font:italic bold 36px "宋体"; |
font-weight属性
值 | 说明 |
normal | 默认值,定义标准的字体 |
bold | 粗体字体 |
bolder | 更粗的字体 |
lighter | 更细的字体 |
100、200、300、400、500、600、700、800、900 | 定义由细到粗的字体 400等同于normal,700等同于bold |
文本样式
文本属性
属性 | 含义 | 示例 |
color | 设置文本颜色 | color:#00C; |
text-align | 设置元素水平对齐方式 | text-align:right; |
text-indent | 设置首行文本的缩进 | text-indent:20px; |
line-height | 设置文本的行高 | line-height:25px; |
text-decoration | 设置文本的装饰 | text-decoration:underline; |
排版文本段落
水平对齐方式
text-align属性
值 | 说明 |
left | 把文本排列到左边。默认值:由浏览器决定 |
right | 把文本排列到右边 |
center | 把文本排列到中间 |
justify | 实现两端对齐文本效果 |
文本修饰和垂直对齐
文本修饰
text-decoration属性
值 | 说明 |
none | 默认值,定义的标准文本 |
underline | 设置文本的下划线 |
overline | 设置文本的上划线 |
line-through | 设置文本的删除线 |
文本阴影
语法:
text-shadow : color x-offset y-offset blur-radius;
color:阴影颜色
x-offset:X轴位移,用来指定阴影水平位移量
y-offset :Y轴位移,用来指定阴影垂直位移量
blur-radius:阴影模糊半径,代表阴影向外模糊的模糊范围
超链接伪类
伪类样式
语法:
标签名:伪类名{声明;}
示例:
a:hover {
color:#B46210;
text-decoration:underline;
}
使用CSS设置超链接
伪类名称 | 含义 | 示例 |
a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序:a:link->a:visited->a:hover->a:active
列表样式
list-style-type
list-style-image
list-style-position
list-style
背景样式
背景颜色:background-color属性
背景图像:background-image属性
背景重复方式:background-repeat属性
背景定位:background-position属性
背景样式简写:background属性
设置背景图像
背景图像:background-image属性
语法:
background-image:url(图片路径);
背景重复方式:background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
设置背景图像
背景定位:background-position属性
值 | 含义 |
Xpos Ypos | 单位:px, Xpos表示水平位置,Ypos表示垂直位置 |
X% Y% | 使用百分比表示背景的位置 |
X、Y方向关键词 | 水平方向的关键词: left、center、right 垂直方向的关键词: top、center、bottom |
背景属性
背景属性:background属性
CSS3渐变
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
线性渐变
linear-gradient ( position, color1, color2,…)
position:渐变方向
color1:第一种颜色值
color2:第二种颜色
盒子模型—边框
边框的常用属性
border-color(边框颜色)
border-width(边框粗细)
border-style(边框样式)
border
border-color
属性 | 说明 | 示例 |
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color | 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; | |
上边框颜色:#369 左、右边框颜色:#000 下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色: #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
border-width
属性 | 说明 | 示例 |
border-top-width | 上边框粗细 | border-top-width:5px; |
border-right-width | 右边框粗细 | border-right-width:10px; |
border-bottom-width | 下边框粗细 | border-bottom-width:8px; |
border-left-width | 左边框粗细 | border-left-width:22px; |
border-width | 四个边框的粗细统一 | border-width:5px; |
上、下边框粗细:10px 左、右边框粗细:5px | border-width:10px 2px; | |
上边框粗细:5px 左、右边框粗细:1px 下边框粗细:6px | border-width:5px 1px 6px; | |
上、右、下、左边框粗细: 1px 2px 5px 2px | border-width:1px 2px 5px 2px; |
border-style
none
hidden
dotted
dashed:虚线边框
solid:实线边框
double
border
同时设置边框的颜色、粗细和样式
示例:
border:1px solid #3a6587;
border:1px dashed red;
外边距
margin
margin-top
margin-right
margin-bottom
margin-left
margin
外边距
外边距的妙用:网页居中对齐
margin:0px auto;
经验:
网页居中对齐的必要条件:块元素和固定宽度
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
盒子模型的尺寸
高度=上下外边距+上下边框+上下内边距+内容宽度
宽度=左右外边距+左右边框+左右内边距+内容宽度
box-sizing属性
语法:
box-sizing:content-box | border-box | inherit;
content-box:盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框
border-box:盒子的实际高度和宽度包括元素内容、边框和内边距
圆角边框
语法:
border-radius: 20px 10px 50px 30px;
使用border-radius制作特殊图形
圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
示例:
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值。
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同,一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
盒子阴影
语法:
box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型内阴影
x-offset:X轴位移,指定阴影水平位移量
y-offset:Y轴位移,指定阴影水平位移量
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
color:阴影颜色,定义绘制阴影时所使用的颜色
浮动
经验:
内联标签可以包含于块级标签中,
成为它的子元素,而反过来则不成立
display属性
display属性作用:用于指定HTML标签的显示方式
常用属性值如下表所示:
值 | 说明 |
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
inline | 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 |
inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性 |
none | 设置元素不会被显示 |
浮动属性:float
float属性
属性值 | 说明 |
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值。元素不浮动,并会显示在其文本中出现的位置 |
边框塌陷
清除浮动
clear属性
值 | 说明 |
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
解决父级边框塌陷的方法
clear属性可以清除浮动对其他元素造成的影响,可是依然解决不了父级边框塌陷问题,怎么办?
浮动元素后面加空div
设置父元素的高度
父级添加overflow属性
父级添加伪类after
overflow属性
overflow属性:溢出处理
属性值 | 说明 |
visible | 默认值。内容不会被修剪,会呈现在盒子之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
小结
清除浮动,防止父级边框塌陷的四种方法
浮动元素后面加空div
简单,空div会造成HTML代码冗余
设置父元素的高度
简单,元素固定高会降低扩展性
父级添加overflow属性
简单,下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
isplay:inline-block
可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
位置方向不可控制,会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度,可以决定排列方向
float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式
CSS中有三种定位机制
标准流
浮动
定位
定位属性:position
指定盒子的位置,指它对其父级的位置或相对它自身应该在的位置。
属性值 | 说明 |
static | 默认值。没有定位,元素按照标准文档流进行布局。 |
relative | 相对定位。不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 |
absolute | 绝对定位。脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static),否则为body文档本身。 |
fixed | 固定定位;相对于浏览器窗口进行定位,但不随着滚动条的移动而改变位置。 |
static属性值
默认值。没有定位,元素按照标准文档流进行布局。
relative属性值
relative属性值
相对自身原来位置进行偏移
偏移设置:top、left、right、bottom
left和top正、负取值的方向
![](https://i-blog.csdnimg.cn/blog_migrate/6e46cc2ab541b412c291586960aaa794.png)
相对定位元素的规律
相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
浮动元素设置相对定位
设置第二个盒子右浮动,再设置第一、第二盒子相对定位
绝对定位
absolute属性值
偏移设置:left,right,top bottom
绝对定位小结
依次使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后,它原来的位置不会被保留下来
绝对定位不设置偏移量
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况
固定定位
fixed属性值
偏移设置: left、right、top、bottom
类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口。
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后,它原来的位置会被保留下来
层级提高,可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量
z-index属性
作用:调整元素定位时重叠层的上下位置
z-index属性值:整数,默认值为0
设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
网页元素透明度
属性 | 说明 | 举例 |
opacity:x | x值为0~1,值越小越透明 | opacity:0.4; |
filter:alpha(opacity=x) | x值为0~100,值越小越透明 | filter:alpha(opacity=40); |
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境,z-index是0
设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可