简单CSS总结

样式

• CSS语法
  1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
  2）属性必须放在花括号中，属性与属性值用冒号连接。
  3）每条声明用分号结束。
  4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
  5）在书写样式过程中，空格、换行等操作不影响属性显示。

• CSS 样式分类

• 内部样式
• 外部样式
• 行内样式

• CSS外部样式引用

<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>
   @import url(css/index.css);
</style>

• 样式的优先级
  !important>行内>内部>外部

选择器

• 选择器类别

• 元素选择器
• 类选择器
• id选择器
• 通配选择器
• 群组选择器
• 包含选择器
• 伪类选择器

• 选择器权重

选择器	权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0
元素选择器	0001
类选择器	0010
id选择器	0100
包含选择器	为包含选择符的权重之和
内联样式	1000
!important	10000
CSS选择器解析规则1：	当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式
CSS选择器解析规则2：	相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

• 层级选择器
  E>F 子代选择器
  E+F 相邻兄弟选择器，E元素的后面第一个兄弟
  E~F 通用选择器，当前元素的后面所有的亲兄弟
• 属性选择器
  E[attr]:只使用属性名，但没有确定任何属性值;
  E[attr=“value”]:指定属性名，并指定了该属性的属性值;
  EFatt～='value]:指定属性名，并且具有属性值，并且包含一个value ；
  E[attr^=“value”]:指定了属性名，并且有属性值，属性值是以value开头的;
  E[attr$="value”]:指定了属性名，并且有属性值，而且属性值是以value结束的
  E[attr*= “value”]:指定了属性名，并且有属性值，而且属值中包含了value;
• 结构性伪类选择器
  X:first-child匹配子集的第一个元素。IE7就可以支持
  X:last-child匹配父元素中最后一个X元素
  X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
  X:only-chid这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
  X:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中，根元素永远是HTML
  X:empty匹配没有任何子元素（包括包含文本)的元素X
• 目标伪类选择器
  E:target选择匹配E的所有元素，且匹配元素被相关URL指向
• U元素状态伪类选择器
  E:enabled 匹配所有用户界面(form表单）中处于可用状态的E元素
  E:disabled 匹配所有用户界面(form表单）中处于不可用状态的E元素
  E:checked 匹配所有用户界面(form表单)中处于选中状态的元素
  E:selection 匹配E元素中被用户选中或处于高亮状态的部分
• 否定伪类选择器
  E:not(s)(IE6-8浏览器不支持:not()选择器。)
  匹配所有不匹配简单选择符s的元素E
• 动态伪类选择器
  E:link 链接伪类选择器
  选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
  E:visited 链接伪类选择器
  选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
  E:active 用户行为选择器
  选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
  E:hover 用户行为选择器
  选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

文本属性

属性	描述	说明
font-size	字体大小	单位是px，浏览器默认是16px,设计图常用字号是12px
font-family	字体	当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推
color	颜色	color:red; color:#ff0; color:rgb(255,0,0); 0-255
font-weight	加粗	font-weight:bolder(更粗的)/bold（加粗）/normal（常规） font-weight:100-900; 100-500不加粗 600-900加粗
font-style	倾斜	font-style：italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）
text-align	文本水平对齐	text-align:left; 水平靠左 text-align：right；水平靠右 text-align：center；水平居中 text-align:justify;水平2端对齐，但是只对多行起作用
line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
text-index	首行缩进	text-indent可以取负值； text-indent属性只对第一行起作用
letter-spacing	字符间距	控制文字和文字之间的间距
word-spacing	字词间距	控制英文词和词之间的间距
text-decoration	文本修饰	text-decoration:none没有/underline下划线/overline上划线/line-through删除线
text-transform	字母大小写	text-transform :capitalize 首字母大写 / lowercase 全小写 / uppercase 全大写
font	文字简写	font是font-style font-weight font-size / line-height font-family 的简写。 font:italic 800 30px/80px “宋体”；顺序不能改变 ,必须同时指定font-size和font-family属性时才起作用

列表样式

属性	描述	说明
list-style-type	定义列表符合样式	单位是px，浏览器默认是16px,设计图常用字号是12pxlist-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号)
list-style-image	将图片设置为列表符合符合样式	list-style-image:url()
list-style-position	设置列表项标记的放置位置	list-style-position：outside；列表的外面 默认值 list-style-position：inside；列表的里面
list-style	简写	list-style:none; 去除列表符号

背景样式

属性	描述	说明
background-color	背景颜色	background-color：red;
background-image	背景图片	background-image:url();
background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y;
background-position	背景图片的定位	background-position：水平位置 垂直位置；可以给负值
background-attachment	背景图片的固定	background-attachment : scroll (滚动)/ fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）
background-size	背景图片大小	cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中 contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白

浮动属性

• 浮动：float:left （左浮动）/right（有浮动）/none （不浮动）
  1、浮动会脱离网页文档，与其他不浮动的元素发生重叠
  2、但是不会与文字发生重叠，文字会环绕浮动元素显示

• 清除浮动：clear：none（允许有浮动）/right（不允许右边有浮动）/left（不允许左边有浮动）/both（不允许有浮动）
  清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

• overflow:hidden,让浮动元素计算高度方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)

• 方法2:在浮动元素下方添加空块元素,并给该元素添加声明: clear:both;height:O;overflow:hidden;(缺点:在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)

• 方法3:万能清除浮动法
  选择符:after{content:“”;clear:both;display:block;height:O;visibility:hidden;/overflowhidden;,}

盒子模型

• 内边距padding
  1）用来调整内容在容器中的位置关系
  2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
• 边框border
  border:边框宽度 边框风格 边框颜色;
  边框宽度：border-width:
  边框颜色：border-color:
  边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
  简写：border：30px solid blue; 参数的顺序可以随意调换
  单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left 右 border-right
• 边距
  margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界
  属性值的4种方式：margin可以给负数
  四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右
  一个值：四个方向 margin:2px;/定义元素四边边界为2px/
  margin:0 auto;/一个有宽度的元素在浏览器中横向居中。/
• 属性值的4种方式
  四个值：上 右 下 左
  三个值：上 左右 下
  二个值：上下 左右
  一个值：四个方向
• 边距margin的特性

• 兄弟关系, 两个盒子垂直外边距与水平外边距问题
  垂直方向,外边距取最大值.
  水平方向,外边距会进行合并处理.
• 父子关系, 给子加外边距, 但作用于父身上了
  解决方案：

1. 子margin-top===>父的padding-top, 注意高度计算.
2. 给父盒子设置边框
3. 加浮动
4. overflow:hidden. BFC,

怪异盒子模型

box-sizing

• content-box：标准盒模型，宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
• border-box：怪异盒模型，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

display: flex，弹性盒
弹性盒是一种新的布局方式， 特别适合移动端布局
影响：
1. 子元素默认横向排列
2. 行内元素， 变成了块级元素
3. 只有一个元素的时候， margin:auto 自动居中
flex-direction：修改主轴方向

• row
• column
• row-reverse
• column-reverse
  justify-content(上下对齐) 主轴侧轴对齐方式
• flex-start 上对齐
• flex-end 下对齐
• center 上下居中
• space-between 两端对齐
• space-around 距离环绕
  **align-items（左右对齐） **
• flex-start
• flex-end
• center
  flex-wrap: wrap; 折行
  align-content: 控制折行后行间距
• flex-start
• flex-end
• center
• space-around
• space-between
  align-self:设置容器中元素 在交叉轴上的对齐方式和 align-items 类似)

1. auto 表示继承容器的 align-items 属性。（默认值）
2. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
3. flex-end 沿着交叉轴方向 结尾 对齐。
4. center 沿着交叉轴方向 居中 对齐。
5. baseline 沿着交叉轴方向，按照项目内的文字对齐。
6. stretch 沿着交叉轴方向自动进行拉升到最大。

溢出属性

• 溢出属性
  overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit;
  visible：默认值，溢出内容会显示在元素之外;
  hidden：溢出内容隐藏;
  scrollI：滚动，溢出内容以滚动方式显示;
  auto：如果有溢出会添加滚动条，没有溢出正常显示;
  inherit：规定应该遵从父元素继承overflow属性的值。
  overflow-x：X轴溢出;
  overflow-y：Y轴溢出

• 空余空间
  white-space ：nowrap /pre/pre-wrap/ pre-line;
  nowrap ：不换行
  pre：显示空格,回车, 不换行
  pre-wrap： 显示空格,回车, 换行
  pre-line： 显示回车,不显示空格, 换行

• 省略号显示
  text-overflow: ellipsis /clip;
  clip：默认值，不显示省略号
  ellipsis：显示省略标记

元素类型

• 分类

• 块元素：块元素默认占一行，默认自上而下排列。可以定义自己的宽度和高度。

• 行内元素：不能定义的自己的宽度和高度，只能根据自己包含的内容确定宽度和高度。对margin和padding个别属性值不生效

• 行内块元素：同时具备行内元素和块元素的特点。

• 类型转换
  display：block/inline/inline-block/none/…
  block：把元素转换为块元素
  inline：把元素转换成行内元素
  inline-block：把元素转换为行内块元素
  none：隐藏

定位

• 绝对定位(absolute)：脱离文档流，当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏。
• 相对定位(relative)：不脱离文档流，自己的初始位置作为参照物
• 固定定位(fixed)：脱离文档流，浏览器的当前窗口，
• 粘性定位(sticky)：可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好
• 层叠顺序(z-index)：不带单位，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上

锚点

锚点作用：页面不同区域的跳转， 使用a链接。

<a href="#锚点名字"></a>
<div id="锚点名字"></div>

calc()函数:用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如: width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;
calc)函数支持“+“,”-“”，“*”“，””运算;calc()函数使用标准的数学运算优先级规则;

表单

<!-- 单选框 -->
<input type="radio" name="bbb" id="radio"><label for="radio">单选框</label>
<!-- 复选框 -->
<input type="checkbox" name="bbb" id="checkbox"><label for="checkbox">复选框</label>
<!-- 上传文件 -->
<input type="file" name="" id="">
<!-- 图片按钮-代替提交按钮 -->
<input type="image" src="submit.jpg">
<!-- 隐藏按钮 -->
<input type="hidden" name="" id="" value="带给后端的个人信息,,">
<!-- 禁用disabled,只读readonly -->
<input type="text" disabled value="1111111">
<input type="text" readonly value="222">
<!--下拉菜单 
select 支持的属性
  1. size ,显示几个
  2. multiple, 选多个,ctril,
option 支持的属性
  1. value , 提供给后端需要用的value值.
  2. selected, 默认选中
-->
<select size="1">
    <option value="ln"> 辽宁</option>
    <option value="sd">山东</option>
    <option>山西</option>
    <option >河南</option>
    <option selected>河北</option>
</select>
<!-- 文本域
	resize 重新设置大小, vertical, horizontal,both , none
	placeholder:提示文字,
	value: 写在双标签内部, 注意空格问题 
-->
<textarea  cols="10" rows="10" placeholder="请输入你的意见" >文本域</textarea>
<!-- 字段集  -->
<fieldset>
    <legend>性别</legend>
    <input type="radio" name="aa">男
    <br>
    <input type="radio" name="aa">女
</fieldset>
<!-- 颜色选择 -->
<input type="color" name="color">
<!-- 邮箱 -->
<input type="email" name="myemail">
<!-- url地址 -->
<input type="url">
<!--电话号码  -->
<input type="tel">
<!-- 滑块效果 step步长  -->
<input type="range" name="range" min="100" max="200" value="100" step="10">
<!-- 数字类型 -->
<input type="number" min="0" max="10" value="4" step="2" name="age">
<!-- 搜索 -->
<input type="search">
<!-- 日期 -->
日期选择 <input type="date">
月份选择 <input type="month">
周数选择 <input type="week">
<!-- 选项表单 -->
<input type="text" list="mylist">
<datalist id="mylist">
    <option value="手机"></option>
    <option value="手表"></option>
    <option value="手环"></option>
    <option value="手镯"></option>
</datalist>
<!-- 属性
	autofocus 获取焦点
	required 必填项, 不能为空
	multiple, 支持多个地址, 用逗号隔开
	pattern="正则表达式"
 -->
 <input type="text" autofocus required pattern="[0-9][A-Z]{3}">

音频

<!-- video元素定义视频 -->
<video src="movie.ogg" controls="controls">Video元素</video>
<!-- audio元素定义音频 -->
<audio src="someaduio.wav">Audio元素</audio>

controls属性:如果出现该属性，则向用户显示控件，比如播放按钮。autoplay属性:如果出现该属性，则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像，直到用户点击播放按钮。

阴影

• 文本阴影
  text-shadow: 0px 10px 1px yellow;
  text-shadow: 0px -10px 1px red, 0px 10px 1px yellow;
  text-shadow: 水平方向位移 垂直方向的位移 模糊程度 阴影颜色;
  说明:水平、垂直阳影的位置允许负值可讲行多阴影设置
• 盒子阴影
  box-shadow: -10px -10px 10px 10px red inset,10px 10px 10px blue;
  box-shadow: h-shadow v-shadow blur spread color inset;
  h-shadow：必需的。水平阴影的位置。允许负值
  v-shadow：必需的。垂直阴影的位置。允许负值
  blur：可选。模糊距离
  spread：可选。阴影的大小
  color：可选。阴影的颜色。
  inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

字体引入

@font-face{
    font-family: kerwin;
    src:url(font/ygyxsziti2.0.ttf);
}
div{
    font-family: kerwin;
    font-size: 50px;
    color:red;
    text-shadow: 5px 0px 0px green;
}

font-face语法说明:
1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-fmily。如““font-family.“ou
rWebFontName”;”
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;