css
CSS的样式具体通用性，结构代码与表现层进行分离，使维护以及二次开发简单。
一般链入css文件有三种方式
1.头部样式 直接编写
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>2.外链样式 链入css文件
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href=".css"/>
</head>3.内联、行内样式 直接编写
< 标签 style="">CSS选择器
css有4个基本选择器
1.通配选择器：匹配页面所有的元素。
2.标签选择器：标签名{ }
3.类选择器：. { }
4.id选择器：# { } （注：id选择器具有唯一性 一般不推荐使用）
选择器有权重，会导致样式覆盖 以上权重排列为 通配<标签<类选择器<id选择器
!important为最高权重
CSS命名
CSS命名要语义化 一般采用驼峰命名以及匈牙利命名
驼峰命名：
大驼峰：例如类、组件、常量。每个单词首字母大写
小驼峰：组合单词，前单词小写，后单词首字母大写
匈牙利命名：组合单词 中间加_下划线
display属性
display: block; 转换为块元素
display: inline; 转换为行内元素
display: inline-block; 转换为行内块display:none 隐藏任何元素
display:block 显示任何元素边距
为解决堆叠情况可使用 transparent为容器设置透明边框
padding 添加内边距：视觉上使元素撑大
margin 添加外边距：视觉上使元素位移
内联元素仅支持水平方向上的外边距调整
盒子大小（m:margin、p:padding、b:border、l:left、r:right、t:top、b:button）
默认 conten-box 内容盒子
x轴：ml+bl+pl+width+pr+br+mr
y轴：mt+bt+pt+height+pt+bb+mb
边框盒子 box-size:border-box
x轴：ml+width+mr (width=p+b)
y轴：mt+height+mb (height=p+b)
背景设置
background-color: rgba();透视效果
opacity: ; 元素的透明度 元素内部的内容继承透明
background-position: ; 定位 适用于精灵图的使用
background-images:linear-gradient 背景渐变 （方向、颜色）
简写方式 ：background: url() 样式 定位;CSS复合选择器
+ 兄弟选择题 p+p { }
,群组选择器 p,a { }
>子代选择器 div>p { } （只能选择其子代 其余后代无法选中）
后代选择器 div p { }
[属性名] [name] (选择所有含该属性的元素)
CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。
其语法为
selector:pseudo-class {property:value;}
CSS类可以搭配伪类使用
html：
<a href="#" class="ex">XXX</a>
css:
.ex:hover {
color:red;
}常用伪类有
:hover 鼠标划过
:focus 获取焦点
:nth-child(n) 例：p:nth-child(n) 选中p元素的父元素的第n个p元素
:first-child 例：p:last-child 选中p元素的父元素的第一个一个p元素
:last-child 例：p:last-child 选中p元素的父元素的最后一个p元素
CSS伪元素
前置操作 ::before 在内容之前添加 无法被选中
后置操作 ::after 在内容之后添加 无法被选中
超出文本省略效果
white-space:nowrap 文本不换行
text-overflow:ellipsis
3994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
