学习前端第二天之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: "学习了"
}