学习前端第二天之css层叠样式
一、设置样式公式
选择器 {属性：值；}
二、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 未访问的链接
：visited 已访问的链接
：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);
十二、CSS样式表三种分类
行内式（内联样式）：直接在标签内部写
<标签名 style="属性":值；"属性"：值></标签名>
内部样式表（内嵌式）
写在head头部中
外部样式表 （外链式）
1.写在css文件里面
2.在head标签里用link标签引入
十二、标签三大分类
1.行内元素标签
<a> <strong> <b> <em> <i> <del> <s> <span>
特点：
1.和相邻行内元素在一行上
2.高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素（a特殊）
2.块级元素
<h1><h6><p><div><ul><ol><li>等
特点：
1.从新行开始
2.高度，行高 外边距以及内边距都可以控制
3.宽度默认是容器的100%
4.可以容纳内联元素和其它块元素
p里面不能放块级元素
3. 行内块标签
input img td 是行内显示 然后也可以改宽高
以上标签可通过display来转换
块转行内：display:inline
行内转块：display:block
块、行内转换成行内块 display:inline-block
十三、CSS复合选择器 （由两个或者两个以上的基础选择器组成）
1.交集选择器 (既 又... 的关系)
标签.class {}
2.并集选择器 （用逗号隔开）
定义的样式完全相同的标签
.class,标签
3.后代选择器用空格隔开
.class h3 {color:red;}
4.子元素选择器 （用大于号表示）
定义：class>标签 {}
5.属性选择器
选取标签带有某些特殊属性的选择器，用中括号来表示 a[title] { color:属性； } input[type=text] div[class^=font] 表示以font开头 div[class$=footer] 表示以footer结尾的 div[class*=tao] 表示包含tao所在的任意位置 伪元素选择器 p::first-letter { /*选择第一个字*/ color: red; font-size: 30px } p::first-line { /* 选中第一行*/ color: green; } p::selection { /*当选中文字的时候可以变化的样式*/ color:pink; } before和after 里面必须要有一个content 在div里插入内容 div::before { content: "俺" } div::after { content: "学习了" }
