时间：2019年12月5日
姓名：胡天鸿 这是我写文章的第一天。
随着HTML的成长,为了满足页面设计的要求,HTML添加了很多显示功能。但是随着这些功能的添加,HTml越来越乱,而且HTML页面越来越臃肿。于是CSS便诞生,CSS3因为有兼容性问题，所以讲到CSS样式的时候,这里会特殊标明。
CSS初识
CSS通常称为CSS样式表或层叠样式表,主要设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽高，边框样式)以及版面的布局显示样式
CSS样式规则
使用HTML是，需要遵从一定的规范。Css亦如此,需要熟练使用CSS对网页进行修饰。具体式如下：
h1{ color:red; font-size:25px;}
CSS字体样式属性
Font-size:——字号大小
Font—size属性用于设置字号,该属性的值可以使用相对长度单位。其中，相对长度单位比较常用，推测使用像素单位px 绝对长度单位使用较少。具体如下：
Font——family字体
Fonr-family设置字体.网页中常用的字体有宋体,微软雅黑。
P{font-family:”微软雅黑”;}
可以同时指定多个字体,中间以逗号隔开，表现如果浏览器不支持第一字体。
CSS unicode字体
方案一：你可以使用英文替代。
方案二:在css直接使用unicode编码写字体名称可以避免错误
CSS注解
CSS规则使用/*需要注释内容*/进行注释的,记在需要注释的内容前使用
列如：
Font-size：14px;/*所有的字体是14像素大小*/
总结：html注释和css注释非常提倡大家使用快捷键ctrl+shift+/
Font-weight:字体粗细
字体加粗除了用b和strong标签之处,可以使用css来实现,但是css是没有语义的。
Fant-weightb属性用于定义字体的粗细,其可用属性值: normal,bold,bolder, lighter, 100-900(100的整数)
默认值：Normal
适用于:所有元素
计算值:数字重量值
取值:
Normal:正常的字体,相当于数字值400
Bold:粗体.相当于数字值。
Nolder：定义比继承值更重的值
Lighter：定义比继承值更轻的值
用数字表示文本字体粗细。取值范围1~9
Font-style:字体风格
字体倾斜了用i和em标签之外,可以使用css表实现.但是css是没有语义的。
Normal:默认值，浏览器会显示标准的字体样式
Italic:浏览器会显示斜体的字体样式
Oblique；浏览器会显示倾斜的字体式
说明:
设置或检素对象中的文本样式
对应的脚本特征为font style
Font:综合设置字体样式(总点)
Font: italic bold 14px “微软雅黑”；
Font综合写法，更简洁
选择器(重点)
标签选择器(元素选择器)
标签选择是指用HTML标签名作为选择器,按标签名分类,为页面中某一类标签指定统一的css样式如下：
标签名：{属性：属性值1；}
元素名:{属性：属性值1：}
标签选择器最大的优点是能快页面中同类型标签一样式同时这也是他的缺点,不能设计差异化样式。
类选择器
CSS命名规范
小技巧：
[if !supportLists]1. [endif]长名称或词组可以使用中横线来器命名
[if !supportLists]2. [endif]不建议使用“_”下划线来命名css选择器
[if !supportLists]3. [endif]不要纯数字，中文等名
命名规范：命名是我们通俗约定，但是没有规定必须用这些常用的命名
多类名选择器
我们可以给标签指定多个类名,从而达到更多的选择日的。
Id选择器
例：
#big{
Color:pink;
}
Id选择器和类选择器区别
W3c标准规定,在同一个面内,不允许相同的名字的id对象出现。但是允许相同名字class。类选择器(class)好比人的名字,是可以多次重复的
通配符选择器
通配符选择器用“*”号表示,他是所有选择器中的作用范围广的,能范围页面中的所有元素。
例：
*{属性1：属性值1：属性2： 属性值2： 属性3： 属性值3:}
连接伪类选择器
Link/*为访问链接*/
Visited/*以访问的链接*/
Hover/*鼠标移动到建接*/
Active/*选定的链接*/
例:
莫甘娜;
结果（位置）伪类选择器
First-child父元素的首元素
Last-child最后一个
Nth-child(n)第n个元素
Nth-last-child(n)第n个元素
Nth-last-child(n)
从最后一个孩子数
目标伪类选择器
Line-height:行间距
Text-align:水平对齐方式
Right：右对齐
Center:居中对齐
Text-indent：首行缩进
Letter-spacing:2px;字间距
Word-spacing:10px单词间距 针对英文中文无效
颜色半透明
文字阴影(css3)
以后我们可以给我们的文字添加效果了shadow影子
Text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
例：
行内式(内联样式)
我们修改一小点样式的时候,我们可以通过内连接快速完成。直接在标签内部写样式。行内部样式表(内联样式表)。
内部样式表
Type=”text/css”在html5中可以省略
外部样式表
-href路径
-type链接文档的类型
-rel:文档与链接之间的关系
标签显示模式(display)
HTML标签一般分为快标签和内标签两种类型，他们也称地元术和行内元素。
块级元素(block-level)
每个块连元素通常都会独自占据一整行或多整行，可以对其设置宽度,高度，对齐等属性,常用于网页布局和网页结构搭建
Background-color:pink;背景颜色
Width：100px； height：100px；
Css+DIV布局
块级元素的特点：
[if !supportLists](1) [endif]总是从新行开始
[if !supportLists](2) [endif]高度，行高，外边距以及边距都可以控制
[if !supportLists](3) [endif]宽度默认是容器的100%
[if !supportLists](4) [endif]可以容那练元素和其他块元素
行内元素(inline-level)
行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度 高度，对齐等属性，常用于控制页面中文本的样式
行内元素的特点：
[if !supportLists](1) [endif]和相邻行内元素在一行上
[if !supportLists](2) [endif]高，度无效，但水平方向的padding和margin可以设置
垂直方向无效
标签显示模式转换dispiay inline;
快转行内：dispiay：block;
快，行内元素转换为行内块：dispiay：inline-block;
复合选择器
[if !supportLists]1. [endif]交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器,第二个选择器为class，两个选择器之间不能有空格，如h3。Spectial
[if !supportLists]2. [endif]并集选择选择器
是各个选择器通过逗号连接而成
P{
Color:#0f0;
}
并集选择器和的意思，所有选择器都会执行
P，div,h1.yao{
Color:#0f0;
}
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是吧外成标签写在前面，内层标签写在后面中间用空格分隔。当标签发生嵌套时，内层标签就成为标签的后代
子元素选择器
.item li{
Color:#0f0;
}
.item>li{
Color:#0f0;
}
属性选择器
选择标签带有特殊属性的的选择器我们称为属性选择器a[title]
Input[type=text]{
}
伪元素选择器
：：first-letter选择第一字
::first-line选择第一行
：：selection当我们选择中字文字的时候可以变化的样式。
Before-以前 在合子内前插入内容
After-未来 在内容后面插入内容
Div：：before{ div：：after{ Content:”结束”
}
Content:”开始”/
}
CSS背景(background)
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
repeat-x 横 向平铺 repeat-y 纵向平铺 no-repeat 不平铺
position: top 上 |center 中|boottom 下| left 左| lenter 中| right 右
背景图片例如：
background-image:url(ip地址/重命名)；
背景附着
语法： backgorund-attachment:scroll |fixed;
scroll:背景图像是随对象内容滚动
fixed：背景图像固定
背景透明css3
background:rgba(0,0,0,0.3)
background-size:50%;
cover 图片进行等比例缩放 图片一定要保证宽度和高度同时满足合子大小
background-size；cover；
contain 会自动调整缩放比例，保证图片始终终究完整显示在背景区域图片进行等比例缩放
background-size：contain；
多背景图片
以逗号分隔可以设置多背景,可用于自适应布局做法就是用逗号隔开就好了。
例：div{
width:500px;
height:500px;
background:url(./名) no-repeat left top,
url(./名) no-repeat right bottom hotpink;
}