第二部分CSS3
2.1CSS样式表的基本使用
链接外部样式文件
通过link标签将外部的css文件导入到我们当前的html文件中。
—好处:将数据和显示分离,同一份css文件也可以被多个html共用。
—坏处:浏览器先加载数据信息,再读取数据信息中的link标签,再加载link所导入的文件,相对而言比较慢
导入外部样式文件
通过@import导入,但是不推荐这么使用,有些浏览器不支持此操作的。
使用内部样式定义
—好处:统一加载,相对较快
—坏处:数据和样式揉在一起,不方便管理,而且css样式也不方便变共享
使用内联样式
直接写在相对应的标签style属性中
—坏处:冗余过大
—好处:针对性最强,总有几个特别的不跟大部队走
2.2CSS选择器
元素选择器
标签名 {
属性:属性值;
…
}
属性选择器
根据标签中属性的特点来进行选择的
id选择器
通过id值来进行选择
类选择器
类选择器主要看的是class属性,基本上每个标签都有id、class、style属性
包含选择器
指的是在某一个元素之下的所有元素的选择
子选择器
父子关系
兄弟选择器
同级别
选择器组合
伪元素选择器
不是元素,但是也可被更改的一些内容
-:first-letter:首字母,只针对块级元素,如果要使用到内联元素上,要么指定宽高,要么将position属性设置为absolute、或者将display属性定义为block
-:first-line:首行,只针对块级元素,如果要使用到内联元素上,要么指定宽高,要么将position属性设置为absolute、或者将display属性定义为block
–:before:在元素之前
–:after:在元素之后
伪类选择器
标签的状态!
:link:超链接点击之前
:visited:超链接访问之后
:hover:鼠标悬浮的时候
:active:当点击的时候
:focus:当获取焦点时
2.3 文字与文本相关属性
文字相关属性
- color:文字的颜色
font-family:文字的字体
font-size:文字的大小 px或pt(打印机模式下的单位)
font-weight:文字的加粗
lighter:细的
normal:普通的默认的
bold:加粗
bolder:更粗
设置数值
font-decoration:文字划线
none无样式
underline下划线
line-through:中划线
overline:上划线
blink:闪烁(目前的浏览器不太支持了)
font-style:文字的样式- text-shadow:文字的阴影 复合属性
color:阴影颜色
xoffset:阴影横向的偏移量 正值向右
yoffset:阴影纵向的偏移量 正值向下
radius:阴影的模糊程度
text-transform:文字的大小写(英文)
none默认
capitalize:首字母大写
uppercase:所有字母大写
lowercase:所有字母小写
line-height:文字的行高
letter-spacing:字符之间的间距
word-spacing:单词之间的间距
文本相关属性
- text-indent:文本的缩进
text-overflow:文本溢出
clip溢出剪裁,前提overflow:hidden
ellipse溢出剪裁,剪裁的部分用…表示,前提overflow:hidden
vertical-align:垂直对齐方式
auto:自动对齐
baseline:基线对齐
sub:与文本下标对齐
super:与文本上标对齐
top:顶端对齐
middle:中间对齐
bottom:低端对齐
length:偏移距离
text-align:水平对齐方式
left
right
center
-justify两端对齐
-work-break:文本换行方式
normal:依赖于浏览器的换行行为
keep-all:只能在半角空格或连字符地方换行
break-all:允许在单词中间换行
white-space:空格处理方式-什么是是否换行
normal:默认,到达容器边界再换行
nowrap:强制在同一行直至结束,如果遇到<br>
再换行
2.4 背景与边框相关属性
背景相关属性
- background:是一种复合属性,可以设置背景色,也可以设置背景图,还可以设置背景图重复模式
background-color:背景色
background-image:背景图
background-attachment:背景图是否可以滚动
scroll:滚动
fixed:固定
background-position:背景图的位置
background-repeat:平铺
repeat横纵平铺
no-repeat不平铺
repeat-x:横向平铺- repeat-y:纵向平铺
新增的几个属性