这是我参与「第四届青训营」笔记创作活动的的第2天

以下是个人总结的常见的CSS属性和用法

1.修改颜色

<style>
    p {
        color: red;
        font-size: 12px;
    }
</style>

2.选择器

标签选择器
类选择器：样式点定义，结构类（class）调用 ,一个或多个，开放最常用

<li class="red">  <li>

多类名

class=“red font35”

id选择器：样式#定义，结构id调用，只能调用一次
通配符选择器：*

3.字体属性

p{font-family:'Microsoft YaHei',tahoma,'hiragino Sans GB';}

大小 font-size：16px；
粗细 font-weight:400(normal) 700(bold)
样式 font-style：normal italic（斜体）

复合属性 font：italic 700 16px 'Microsoft yahei'

4文本属性

文本属性	样式
颜色	color: #fff/rgb=(200,0,0)/red;
装饰文本	decoration:underline;/lian-through;/overline;/none;
对齐文本	text-align: center;
文本缩进	text-indent:2em;
行间距	line-height:26px;

5.引入方式

内部样式表
行内样式表
外部样式表***

外部建立.css文件，html文件中用<link rel="stylesheet" href="***.css">引用

6.Emmet

div+tab
div+p
div*5
.nav+tab #+tab
.nav$*5

7.复合选择器

后代选择器 ul il {}
子选择器 ul>li {}
并集选择器 p,div {}

8.链接伪选择器

a:link {}
a:visited {}
a:hover {}
a:active {}

9.元素显示模式

块级元素<p> <div><ul><ol><li>
行内元素<a><span>
行内块元素<img><input>
显示模式转换：display：block；

10.文字垂直居中

行高等于盒子的高度

行高等于上空隙，文字，下空隙之和

11.css背景

background-color
background-image:url(图片)
背景平铺：

background-repeat：no-repeat；

background-repeat：repeat-x；

background-repeat：repeat-y；

背景图片位置

background-position：x，y；

方位名词：left center right///top center bottom 前后顺序无关

精准方位：20px 50px；

混合单位：center 20px；

背景图像固定

background-attachment：scroll/fixed;

背景复合写法

background：颜色图片地址平铺滚动位置

背景半透明

background-color：rgba（0,0,0,.3);

12.css三大特性

层叠行样式就近原则
继承性
优先级

权重（大->小）

选择器	权重
!important	无穷大
行内样式style=""	1,0,0,0
id选择器	0,1,0,0
类选择器/伪类选择器	0,0,1,0
元素选择器	0,0,0,1
继承 & *	0,0,0,0

权重叠加！

13.盒子模型

边框border

border-width
border-style: solid 实线边框 dashed 虚线边框 dotted 点线边框
border-color
复合写法：border: 16px solid pink;（粗细，样式，颜色）
细线边框：border-collapse:collapse;（合并相邻边框）

2.内边距padding
padding-top padding-bottom padding-right padding-left
复合写法：上右下左

3.外边距margin
margin-top margin-bottom margin-right margin-left
复合写法同上；
块级盒子居中对齐：先给盒子指定宽度再margin:0 auto;
行内元素，行内块元素居中对齐：给父元素添加text-align：center

4.嵌套块元素垂直外边距塌陷

解决：为父元素定义上边框；为父元素定义上内边距；为父元素添加overflow:hidden;

5.清除内外边距

<style>
   *{
        padding:0;     
        margin:0;}
    }
</style>

6.去掉li前面的项目符号（小圆点）

list-style: none;

7,圆角边框

<style>
    div {
        border-radius:10px;

		border-top-left-radius: 10px;
	}
</style>

8.盒子阴影

border-shadow: h-shadow v-shadow blur spread color inset;

9.浮动

<style>
    div {
        float: left/right;
    }
</style>

浮动特性：脱标，不再保留原来位置；具有行内块元素特点；浮动元素搭配标准流父元素使用

清除浮动：

隔墙法：div {.clear: both; }在最后一个浮动子元素后添加标签
父元素加：div {overflow: hidden/auto/scroll}
after伪元素法：

<style>
    .clearfix: after {
        content:" ";
        display: block;
        height: 0;
        clear: both;
       visibility: hidden;
    }
    .clearfix {
		*zoom: 1;
    }
</style>

CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天