CSS
什么是CSS
CSS全称Cascading Style Sheet层叠样式表
用来调整美化网页（对不同的模块去调整宽度高度背景字体大小等）
HTML用来填入基本网页整体内容和结构划分，而CSS则用来美化调整各个部分
基础语法
可以声明在html的style中，也可以外部导入
选择器
什么是选择器：指定出想要要调整的标签
id选择器:定位到指定id的标签(#+id选择)id不能重复
<html lang="en"><head><meta charset="UTF-8"><title>第二的标签</title><style>#a{ <!--id为a的标签被修饰 -->width: 100px;height: 100px;background: red;}</style></head><body><div id="a"></div></body></html>
类选择器：找到所有此类的标签（.+class）class名可以重复
<html lang="en"><head><meta charset="UTF-8"><title>第二的标签</title><style>.a{ <!--class为a的标签都被修饰 -->width: 100px;height: 100px;background: red;}</style></head><body><div class="a"></div><div class="a"></div><p class="a"></p></body></html>
标签选择器：选择所有此标签（标签名）
<html lang="en"><head><meta charset="UTF-8"><title>第二的标签</title><style>div{ <!--所有的div标签都被修饰 -->width: 100px;height: 100px;background: red;}</style></head><body><div class="a"></div><div class="a"></div><p class="a"></p> <!--不是div标签所以未被修饰 --></body></html>
属性选择器：选出所有带有此属性的标签（[属性名]）
<html lang="en"><head><meta charset="UTF-8"><title>第二的标签</title><style>[class]{ <!--含有class属性的标签都被修饰 -->width: 100px;height: 100px;background: red;}</style></head><body><div class="a"></div><div id="a"></div> <!--没有class属性所以未被修饰 --><p class="a"></p></body></html>
并集选择器：使用多个选择器逗号隔开（#id，.class,[属性]，标签名）
<html lang="en"><head><meta charset="UTF-8"><title>第二的标签</title><style>#a,[class]{ <!--包含两种选择器的范围 -->width: 100px;height: 100px;background: red;}</style></head><body><div class="a"></div><div id="a"></div><p class="a"></p></body></html>
常用属性
字体属性
font-family：设置字体
font-style：设置斜体
font-variant：英文文本大小写
font-weight：设置字体的粗细
font-size：设置字体大小
颜色与背景属性
color：设置内容颜色
background-color：设置标签背景颜色
background-image：设置背景图案
background-repeat：设置背景图填充重复方式
background-position：设置背景图案
background-size：设置背景图案大小
文本属性
text-align：设置文本的对齐方式
text：indent：设置文本首行缩进
line-height：设置文本的行高
a:link：设置链接为访问时的文本状态
a:visited：设置链接已经访问过的状态
a:hover：设置链接的鼠标激活状态
边框属性
有上下左右和颜色样式宽度各种搭配
border：没有设定方向和修饰属性就是四边加设置颜色宽度样式
border-color：就是全部四边加只设置颜色
border-top：就是全部颜色宽度样式都设置并且只给上面上边框
border-left-style：就是只设置左边且只设置样式
块元素属性
margin外边距与padding内边距
块元素与内联元素
块元素：会独占一行，默认宽度是填充父元素的宽度，高度是内容的高度。可再自定义宽高
常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div
内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。
常见的内联元素有：a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span
块和内联的转换：
display:block 内转块
display:inline 块转内
display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够
浮动：通过设置浮动可以到达同行的效果不用去转内联块
Float常跟属性值left、right、none，相对于父元素
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
绝对定位与相对定位：
对于嵌套元素的相对定位，定位的元素的父元素是用相对定位就行。相当于定位position-relative还是absolute属性是作用于子元素
快到碗里来
!
本文分享自微信公众号 - IT那个小笔记（qq1839646816）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
浙公网安备 33010602011771号