CSS
层叠样式表。html为内容,css可以起到改变样式,换肤。
语法格式
每行最后的分号可加可不加 规范加上选择器
规定样式名字并作用于所有对应的html标签
CSS添加方法
1)行内样式 直接使用style属性在每个标签中 只能针对当前标签起作用
2)内嵌样式 使用style标签写在head标签之内 只对当前页面起作用
type="text/css"
表示当前样式以css文本规定的
3)单独CSS文件链接样式 使用link标签执行外部一个单独CSS文件 所有样式可以应用不同网页中
外部文件style.css定义样式 使用link
标签引用样式 link
标签用来链接一个文件 rel="stylesheet"
表示链接的文件类型是css
CSS优先级
外面规定的属性最里面的并没有规定的 那么外面规定的属性也会显示出来
CSS选择器
1)标签类型选择器 样式名字和标签同名 作用于该标签的所有网页元素
在style中定义选择的名字是body 作用于正文的body标签
2)类别类型选择器 使用.
开头 使用class
属性进行引用 作用于所有class引用这种选择器的网页元素
在style中定义了.one
的样式 正文中使用class="one"
来引用该样式
3)ID类型选择器 使用#
开头 使用id
属性进行引用 具有唯一性 对比类别类型选择器,它通常被引用一次
在style中定义了#one
的样式 正文中使用id="one"
来引用该样式 定义id样式只能被引用一次
4)嵌套定义的选择器 两个选择器之间使用空格 p span
表示p标签内部的span标签使用该样式
在style中定义选择器名字是是p span
表示该样式是p标签内部的span标签使用的
5)样式集体声明 多种标签使用该样式 p,h1
表示p标签和h1标签同事使用该样式
style中使用h1,p
作为选择器名 表示该样式同时作用于正文的h1标签和p标签
6)全局样式 使用*
作为选择器名字 表示整个网页默认的样式
在style中使用*
声明的选择器表示该样式作用于整个网页
注意:
- 多个类别类型样式可以同时使用class引用,使用空格分开
- id选择器不可以同时引用多个
- 同个标签中可以既使用id属性引用也可以使用class属性引用
文本和字体的样式
单位
em
表示字符 相对于当前字体像素值的倍数 2em 系统当前字体是12px 那么就等于2*12px%
表示百分比 相对于当前像素值的百分比的值 当前像素值没有设置的话可以继承上个对应的标签的值
颜色
文本属性
字符间距的值可以正数也可以负数
使用行高line-heigth
属性来设置文字垂直居中
line-heigth值要和heigth值相同
文字水平居中使用text-align
justify
表示两边没有空格
装饰线text-decoration:none
表示没有装饰线 常在超链接文字中设置
字体属性
font属性可以通过一行方式的写法
背景和超链接样式
背景属性
backgroud-color
背景颜色backgroud-image
背景图片backgroud-repeat
背景图片填充方式 repeat-x
图片横向填充满这个区域 repeat-y
图片纵向填充满这个区域 no-repeat
表示让只填充一次
超链接选择器
a:link
未访问的超链接状态a:visited
已经访问的超链接状态a:hover
鼠标放在链接上时的状态a:active
链接正在被点击时候的状态
超链接属性4种状态的设置顺序
在a:hover
中设置font-size
字体大小可以做到鼠标悬停放大字体的效果
列表和表格的样式
列表属性
list-style-image
设置项目标号的图片list-style-type
设置项目标识的类型 数字,空心圆等list-style-position
设置项目标号和项目文字之间的位置
表格属性
width
表格宽度heigth
表格高度border
表格边框颜色粗细 实虚线border-collapse
表格外层边框和单元格的边框是否重叠 border-collapse:collapse
重叠在一起
奇偶选择器
标签:nth-child(odd|even)
odd
表示基数 even
表示偶数