一、设置样式公式
选择器 {属性:值;}
二、font 设置四大操作
font-size:字体大小 (以像素为单位)
font-weight:字体粗细
font-family:字体 ( 可直接跟字体或者16进制 如:"微软雅黑")
font-style: 字体风格 (em 和i 标签也能倾斜)
normal:正常
italic:斜体
font:综合设置字体样式
选择器 {font: font-style font-weight font-size/line-height font-family}
ps: 顺序不能更改 不需要设置的属性可以省略 必须保留font-size 和font-family
三、基础选择器
1.标签选择器(直接写标签)
p {
font: iltic 700 14px "微软雅黑"
}
2.ID选择器
定义: id="big"
调用: #big
3.类选择器
定义: class="tou"
调用: .tou
3.通配符选择器
* 值所有的标签
直接调用
* {
color: red;
}
四、链接伪类选择器 (多用于a标签 )
:link 未访问的链接
:sisited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接 (点击不松开的时候的状态)
顺序不能变 lvha 常用的就link 和hover
五、结构位置伪类选择器
:first-child: 选取属于其父类元素的首个子元素的指定选择器
:last-child: 选取属于其父类元素的最后一个个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第N个子元素
nth-child(even) 选出所有偶数
nth-child(odd) 选择所有基数
:nth-last-child: 选择器匹配属于其元素的第个子元素的每个元素
六、目标伪类选择器 (多用于设置锚点的时候用)
:target
用法::target {
color: red;
}
七、css设置颜色的三种方式
1. 单词
2. 16进制
3. rgb(255,255,255)
八、css命名规范
1. 长名称或词组可以使用中横线来为选择器命名
c-orange color-orange
2. 不要用下中横线
头:header
内容:content/container
尾:footer
侧栏:sidebar
导航: nav
栏目: column
页面范围控制整体布局宽度:wrapper
左中右: left center right
登录条:loginbar
标志:logo
广告: banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航: subnav
菜单:menu
子菜单: submenu
搜索: search
友情链接: friendlink
页脚: footer
版权: copyright
滚动: scroll
标签页: tab
文章列表: list
提示信息: msg
小技巧: tips
栏目标题: title
九、行高对齐和首行缩进
text-align 水平对齐方式 (center left right)
line-align 行间距 (px为单位)
text-indent 首行缩进 (em为单位 em代表一个汉字的距离)
letter-spacing 字间距
word-spacing 单词间距
十、颜色半透明
color: rgba(255,0,0,0.5); 取值范围0-1
十一、文字阴影
h-shadow 水平阴影的位置,允许负值
v-shadow 垂直阴影的位置
blur 可选 模糊的距离
color 可选 阴影的颜色
text-shadow: 1px 11px 3px rgba(0,0,0,0.4);