css美化界面以及css常用属性
css的基础语法
格式： 选择器{属性：值；属性：值；…}
css中的注释： 格式：/* …*/
css的使用方式
插入样式表的三种方法：
（1）内联方式（行内样式）：就是在HTML的标签中使用style属性来设置css样式
- 格式：
< html标签 style = “属性：值；属性：值；”>被修饰的内容</ html标签>
- 只是作用于本标签
（2）：内部样式（内嵌样式）
- 就是在head头中使用
< style type = “text/css”>…< /style>
标签来设置css样式
- 作用域整个页面
- 还可以使用import在style标签中导入css文件
< style type = “text/css”> @import"style.css"; </ style>
（3）：外部连入方式：
- 就是在head头中使用标签导入一个css文件，再作用于本页面，实现css样式
< link href = “文件名.css” type = “text/css” rel = “stylesheet”/>
- 特点：作用于整个网页
- 优先级：当样式冲突时，就是采用就近原则，是值css属性被距离修饰的内容最近的为主。
- 若没有样式冲突则采用叠加效果
css2中的常用选择器
（1）标签选择器
- 将html的标签作为选择器例如：
p{ … …}网页中所有的p标签采用此种样式h2{… …}网页中所有的h2标签采用此样式
（2）class类选择器：
定义 ： .类名{样式…} 匿名类 其他选择器名.类名{样式…}
使用：<html标签 class=“类名”>…</ html标签 > .mc{color:blue;}
/凡是class属性为mc的颜色都设置为绿/
p.ps{color：green；}
/只有p标签中的class属性值为ps的才采用此样式/】
注意：类选择器可以在网页中重复使用
（3）id选择器
定义：#id名{样式…} 使用：< html标签 id= “id名”>…< /html标签>
注意：id选择器只在网页中使用一次
选择器的优先级：从大到小[id选择器]>[class类选择器]>[html选择器]>[html属性]
（4）关联选择器
- 格式：选择器1 选择器2 选择器3…{样式…}
- table a{…}table中的a标签才使用此样式
- h1 p{…}只有h1标签中的p标签才能使用此样式
（5）组合选择器
- 格式：选择器1，选择器2，选择器3，选择器4…{样式…}
- h3,h4,h5{color:green;}//h3,h4,h5都采用这种样式
（6）伪类选择器
- 格式：标签名：伪类名{样式…}
- a:link {color: #FF0000; text-decoration: none} 没访问的链接
a:visited {color: #00FF00; text-decoration: none} 已经访问的链接
a:hover {color: #FF00FF;text-decoration: underline} 鼠标在连接上
a:active {color: #0000FF; text-decoration: underline}**链接
css3中的选择器
（1）关系选择器
- div>p选择所有作为div元素的子元素p
- div+P选择紧贴在div元素之后的p元素
- div~p选择div后面所有的 兄弟元素p
（2）属性选择器
- [attribute]选择具有attribute属性的元素
- [attribute=value]选择具有attribute属性且属性值等于value的元素
- [attribute~=value]选择具有attribute属性且属性值为一个用空格分割的字词列表，其中的一个等于value元素
- [attribute|=value]选择具有attribute属性且属性值为value中一个字母开头并用-分割的字符串的的E元素
- [attibute^=value]ํٍ选择具有attribute属性，且值以value开头的元素
- [attribute$=value]ํٍ选择具有attribute属性，且值以value结尾的元素
- [attribute*=value]ํٍ选择具有attribute属性，且值中有value的元素
（3）结构性伪类选择器：
- ::first-letter设置对象内第一个字符的样式
- ::first-line设置对象内第一行的样式
- :before设置在对向前（依据对象树的逻辑结构）发生的内容
- ：after 设置对象后（依据对象树的逻辑结构）发生的内容
- ：lang（language）匹配使用特殊语言的元素
- ：element1~element2:
- ：first-of-type匹配同类型中的第一个同级兄弟元素
- ：last-of-type匹配同类型中的最后一个同级兄弟元素
- ：only-of-type匹配同类型中唯一的一个同级兄弟元素
- ：only-child匹配父元素中仅有的一个子元素
- ：nth-child(n)匹配父元素中的第n个子元素
- ：nth-last-child(n)匹配同类型中的倒数第n个同级元素
- ：first-child匹配父元素中 的第一个子元素
- ：last-child匹配父元素中最后一个子元素
- ：root匹配元素在文档中的根元素。在HTML中，根元素永远是HTML
- ：empty匹配没有任何子元素的（包括text节点）的元素
（4）状态伪类选择器
- ：link设置超链接在未被访问的时候的样式
- ：visited超链接在其链接地址已被访问的样式
- ：active设置元素在被用户**（在鼠标点击与释放之间发生的事件）时的样式
- :hover设置元素在其鼠标悬停时的样式
- ：target匹配相关URL指向的元素
- ：enabled匹配用户界面上处于可用状态的元素
- ：disabled匹配用户界面上处于禁用状态的元素
- ：checked匹配用户界面上处于选中状态的元素
- ：not（selector）匹配不含有selector选择器的元素
10.::selection设置选择器被选择时的样式
css常用的属性
尺寸与单位
字体属性：font
文本属性
背景属性
边框属性（特别重要）
内补白
外补白
position定位
Layout布局
FlexibleBox弹性盒子（旧版）
FlexibleBox弹性盒子（新版）
弹性盒子的基本概念
采用Fle’x布局的元素， 称为Flex容器，简称容器
他的所有子元素自动成为容器的成员，成为Flex项目，简称项目。
- 容器默认存在两根轴：水平的主轴和垂直的交叉轴
- 主轴的开始位置叫做main start，结束位置叫做main end
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end
- 项目默认 沿着主轴排列。单个项目占据的主轴空见j叫做main size，占据的交叉轴空间叫做cross size.