最简洁的CSS学习笔记

1.通用属性

1. name：名称，可以重复，可以一样;

2. class：类名，可以重复，也可以拥有多个，给CSS用的；如<p class="one two"></p>;

3. id：唯一标示，不能重复，一般多用在JavaScript中；命名规则与其他语言的标示命名规则一样;

4. title：标题，可以在标签中添加；如<img src="1.jpg" title="这是一张图片">;

2.标签关系

1. 后代关系：父子关系（包含关系）;

2. 兄弟关系：同父关系;

3.CSS-层叠样式表

1. CSS注释：/注释内容写在这里，给程序员看，页面上不显示/;

2. CSS语法规则：所有符号都以英文输入法状态下输入，要小写，大括号里写属性，每条属性语句都以分号结束，属性值要带像素单位（px）；格式：属性:属性值;

4.CSS的引入方式

1. 行内引入：在标签中加样式的引入方式；格式：<标签 style="background:red; font-size:20px;">内容</标签>;注意：代码可维护性极差，CSS代码与html结构没有实现分离；影响的范围只在当前标签;

2. 内嵌引入：在网页头部中加<style type="text/css">CSS样式</style>;注意：代码可维护性比较差，没有实现CSS代码与HTML结构分离，影响范围只在当前页面;

3. 外联引入：在网页外创建一个xx.css文件，网页头部中利用<link rel="stylesheet" type="text/css" href="xx.css">;注意：代码可维护性高，CSS代码与HTML结构完全分离，影响范围整个网站所有引入CSS文件网页中;

5.CSS核心语法：

1. 结构格式：选择器{属性：属性值；属性：属性值；...}；例：p{background:red;color:gray;size:20px;};

2. 选择器：选择页面元素的工具;

3. 大括号：大括号里面写样式内容;

6.选择器

1. 基础选择器：

• 通用选择器：用来初始化网页默认样式的，样式表开头就写；格式：*{padding:0;margin:0;};

• 标签选择器:给指定标签加样式；格式：p{color:green;};

• 类选择器：选择制定类选择器样式；格式:.class名{background:pink;};注意：class名在标签中定义，如class="one";如果几个块内容样式一样，那么给他们一样的样式就可以;

• id选择器：唯一标示，不能重复出现；格式：#id名{backgound-image:url(1.jpg);}注意：id名在标签中定义id="one";id不能随表加，几个块内容样式一样时几个块的id名都得不一样;;

id和class的区别：注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本;

• 伪类选择器：顺序LoVe HAte原则，可以跳过去，但顺序不能换；分别是链接状态(link)，访问过的状态(visited)，活动状态(hover)和点击状态(active);

描点类：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 获取焦点时的样式a:focus{};注意：属性中可以加文本属性，背景颜色和图片；a{}与a:link{}实现的效果是一样的;
列表类：li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意：属性中可以加文本系列属性，背景颜色和图片等;

1. 复合选择器：

• 分组选择器（并集选择器，多元选择器）：用来给多个元素加同一个样式；例：.one,#one,a,span{color:red;font-size:14px;}意思是类one,#one,a标签，span标签有共同属性;

• 后代选择器：给子类元素加属性;例：.one a{text-decoration:none;}意思是类one的后代a标签修饰的内容无下划线;

• 子元素选择器（指定式选择器）：给指定的子元素加属性；例：#one>p{color:red;};意思是给id选择器one的儿子p标签休息的内容加属性;

• 相邻元素选择器：

1.两个紧挨着的兄弟选择器加属性,不给自己加属性，只给后面的兄弟加属性；.one+p{background:red;};
2.one~p{background:green}意思是给one选择器后面的所有p标签元素加属性，前提是他们拥有一个父类;

• 属性选择器：

1.给带有属性的元素的加属性;img[id]{background:red;}给带id的元素加属性;

1. 给带有指定属性值的元素加属性：img[src="b.jpg"]{background:red;}给带b.jpg的元素加属性;

3.给带有指定字符开头的的元素加属性：img[src^="b"]{background:red;}给以b开头的所有元素加属性;
4.选择器带有以指定属性值为结尾的元素：img[src$="b"]{background:red;}给以b结尾的所有元素加属性;
5.选择器带有包含指定属性值的元素:img[src*="b"]{background:red;}给含b的所有元素加属性;

7.元素包含（显示方式的分类）

1. 块元素：用来排版，结构 典型的有：p，p，li，h1，dt;

• 元素自己独占一行显示（与宽度无关）;

• 可以设置宽度和高度;

• 当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度;

2. 行内元素： 用来加样式的；span,a,font,strong;注意：行内元素不要给上下的margin和padding，上下会被忽略，左右起作用（一般不用）;

• 元素在一行上显示;

• 不能直接设置宽度和高度;

3. 行内块元素：image,input;

• 元素在一行上显示;

• 可以设置宽度和高度;

4. 转换关系：行内包含行内；块元素包含块元素，块元素可以包含行内元素;

• Display: inline 将元素转化为行内元素

• Display：inline-block 将元素转化行内块元素

• Display: block 将元素转化为块元素

8.CSS的属性

1. 字体有关属性：

• font-size:字体大小，多少像素，px;

• font-weight:字体粗细，bold（700-900），normal，可以写100-900;

• font-style：字体倾斜，italic，normal;

• font-family:字体，微软雅黑，黑体;

• 属性连写：font: font-style font-weight font-size/line-height font-family;注意： font属性联写必须有 font-size 和font-family(其他属性可以不写)；font-size 和font-family的顺序不能换;

2. 文本：

• color:颜色;

• text-indent：缩进【单位是em】;

• text-decoration：文本线【underline下划线，overline上划线，line-through删除线，none取消线】;

• word-spacing:单词之间距离;

• letter-spacing：字母键距离;

• text-align：水平对齐方式【默认left，center，right】;

• line-height：行高，文字所在行的高度【行高和元素高度相等时文字垂直居中】;

3. 尺寸：是块元素的尺寸，行内元素不可以设置宽高，想设定得转换;

• width：宽度;

• height：高度;

4. 列表ul，li的属性：list-style-type在ul中加了可以的li中不用加;

• list-style-type:none;去掉符号,square方块，circle圆，disc实体圆，加图片了后可以不写也可以list-style-type:none;

• list-style-image:url(1.jpg)图片

• border:1px solid red;给ul整体设置边框

• list-style-position:outside;样式图片定位：inside,outside

5. 背景：

• 背景颜色background-color;

• 背景图片background-image注意：设置背景图片的时候一定要设置宽度和高度;

• 背景平铺background-repeat：repeat （默认值）|no-repeat （不平铺）|repeat-x | （横向平铺）repeat-y （纵向平铺）

• 背景位置background-position：设置具体值： left| right| top| bottom| cneter；设置具体值的时候不区分先后顺序；设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向，设置前背景图片设置格式改成background-image;

• 设置背景是否固定background-attachment： Scroll（默认值）滚动;fixed （图片固定）;

• 属性联写：没有数量限制和先后顺序限制：background:url("") red no-peat 30px 40px;

6. 行高line-height:

7. 盒子模型：用来进行网页布局，必须设置宽度

• 盒子边框属性：

• 组成部分：

1. 边框宽高：border-width:1px;

2. 边框颜色：border-color:red;

3. 边框样式：border-style:solid实线/dotted点线/dashed虚线/none无;

4. 属性联写：border:1px solid red; 注意：属性联写的时候没有先后顺序限制，边框颜色可以不写，边框宽度可以不写

5. 分开写法：

6. border边框：

7. padding内边距：设置内容距离盒子边框之间的距离

8. margin外边距： 设置盒子与盒子之间的距离

     p{
          width:300px;
          height:200px;
         border-top:1px solid red;
         border-left:1px solid  red;
         border-right:1px solid  red;
         border-bottom:1px solid  red;
        }

6. 单独设置属性法：

     border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;

1. 盒子大小：

• 盒子大小影响的地方：继承的盒子再父盒子宽度范围内，padding值不会影响该盒子大小

• 盒子大小计算： 宽度=内容宽度+左右边框+左右内边距

1. 边框可以影响盒子大小

2. 内边距影响盒子大小

3. 以后进行页面盒子布局的实现，如果给盒子设置了内边距，对应的要将内容宽度或者高度减去相应的值

2. margin外边距： 设置盒子与盒子之间的距离

• 盒子居中：

• 属性联写：

1. 标准流下的盒子居中:margin:0px auto;

2. 定位的盒子居中：先走父盒子的一半，再往回走自己宽度的一半

3. Margin: 10px 上 右 下 左 10px

4. Margin:10px 20px 上下10px 左右20px

5. Margin: 10px 20px 30px 上10px 左右20px 下30px

6. Margin: 10px 20px 30px 40px 上右下左

 one{
       width: 100px;
      height:100px;
      border: solid red  1px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
      }

• 
  

• 注意：

• 属性联写：

1. Padding: 10px; 上，右，下，左的距离为10px

2. Padding: 10px 20px; 上下10px 左右20px

3. Padding: 10px 20px 30px； 上10px 左右20px 下30px

4. Padding: 10px 20px 30px 40px; 上， 右 ， 下， 左

1. 当两个盒子垂直显示的时候，外边距以设置的最大值为准（外边距合并的第一种情况），当两个盒子横排显示时，外边距叠加

2. 外边距塌陷（有难问题）解决步骤：

3. padding内边距：设置内容距离盒子边框之间的距离

1. 给父盒子设置边框

2. 给父盒子设置overflow:hidden;

1. 清除边距：

1. 方法1：*{padding：0；margin：0；}

2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

9.CSS的三大特性

---

1. 继承性：

• 可继承性：color，text-align，text-indent，font-size，font-weight，font-family

• 不可继承：text-decoration，border，display，margin，float，padding

• 继承性发生的前提是标签之间属于一种嵌套关系

• 文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

• 行高可以实现继承

• 特殊性：

1. 不能继承父元素中的文字颜色（层叠掉了）

2. <h1></h1> 标题标签不能继承父元素中的文字大小

2. 重叠性：层叠性是指样式的覆盖

• 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

• 层叠性发生的前提： 样式冲突

3. 优先级：

• 权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

• 把权重相加，值越大越有先

• 权重一样，后面的样式起作用

10.补充知识笔记

---

1. 表单优化写法：<lable for="one">用户名：</lable><input type="text" id="one">

2. 格式化列表图标：list-style: none

3. 表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

4. Bfc “格式化上下文”

5. overflow:

• visible:默认值。内容不会被修剪，会呈现在元素框之外

• hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

• scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

• auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

---

12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

---

• 用法： Float:left| right

• 特点：要浮动都浮动

1. 设置了浮动的元素不占原来的位置（脱标）

2. 可以让块级元素在一行上显示

3. 浮动可以行内元素转化为行内块元素

4. 模式转换的过程中，能用display就用display

• 清除浮动：

1. 定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

2. 注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

3. 清除浮动方法：
   [x]注意：在要清除浮动的元素后面添加一个空块元素（<p></p>,标签），在添加的空元素中加clear:both | left |right

     .clearfix{
            clrar:both;
      }
     <p class="content">
           <p class="left"></p>
           <p class="right"></p>
           <p class="clearfix"></p>
     </p>

  [x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**

     .content{
     width:500px；
     overflow:hidden;
     }

  [x]使用伪元素清除浮动

     .clearfix:after{
        content:"";
       display:block;
       clear:both;
       height:0;
       visibility:hidden;
     }
     .clearfix
     {
       zoom:1;
     }
     

     <p class="content  clearfix">
     <p class="left"></p>
     <p class="right"></p>
     </p>

13.定位：方位：left、right、top、bottom

---

• 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

• 绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

2. 当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

3. 当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

4. 给盒子设置了绝对定位，该盒子不占位置（脱标）

5. 给行内元素设置绝对定位后，该元素转化为了行内块元素

6. 注意：元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置

• 相对定位：相对于元素原位置，会占有以前位置；position：relative；

1. 元素设置了相对定位后占原来的位置

2. 设置相对定位以自己的位置为参照设置位置

3. 相对定位不能进行元素的模式转换

4. 子绝父相（子元素设置绝对定位，父元素设置相对定位）

• 固定定位：相对于整个稳稳当固定不变；固定定位不占位置（脱标）;将行内元素转化为行内块元素position:fixed

• 层级问题：

1. 只有设置到定位才会有层级问题

2. 兄弟元素中存在相对，绝对等定位，谁的HTML文档结构在后面，谁在最外层（层级高）

3. Z-index:设置层级，值是数字，只要有定位会用到定位设置

14. CSS之精灵兔：选择透明文档

---

• 浏览器中的坐标系

• 圆点以右为正方向，圆点以下为正

• CSS精灵是一种处理网页背景图像的方式；精灵图也是一种背景图片

• 精灵图的使用

1. 使用fw一定要用打开的方式打开精灵图

2. 使用精灵图作为背景图片的时候，常与background-position配合使用

3. 测量精灵图中的元素的坐标使用矩形选择器

4. 或者使用快捷键 字母： k

15. CSS可见性

---

• overflow: hidden 将超出部分进行隐藏

• display: none 直接将元素隐藏

• display：block 将元素显示(与js配合更搭)

• visibility:hidden 将元素隐藏

• display: none; 将元素隐藏后不占位置

• visibility: hidden; 将元素隐藏后占原来的位置

16. 图片和文字居中

---

• 每一种inlne-block元素都有一个默认的vertical-align:baseline

• vertical-align:middle 垂直对齐； vertical-align与inline-block更搭配；

17.规避脱标流

---

• 网页布局过程中能用标准流就用标准流

• 标准流不能解决浮动

• 浮动不能解决定位

• 使用margin-left/margin-right 取值为auto可以将盒子自动冲到两外一边

18. 标签包含规范

---

• p可以包含任何标准流下的标签

• p标签不能包含p和标题标签和列表标签

• 标题便签可以包含其他标签

• 行内元素最好不要包含其他标签

19. 设置宽高的总结

---

• 在浮动之后，元素可以设置宽高

• 在绝对定位后，元素可以设置宽高

• 在固定定位后，元素可以设置宽高

20. 提升至CSS3

---

• CSS3和CSS2：CSS功能强大，代码简洁

• 伪类选择器：

1. 第一个子元素：first-child

2. 最好一个元素：last-child

3. 第n个子元素：nth-child（n）;n给数值

4. 奇数为子元素：nth-child(odd);或者（nth-child(2n+1)）

5. 偶数位子元素：nth-child(even)；或者（nth-child(2n)）

• 文本阴影：text-shadow：水平，垂直，阴影

• 盒子阴影：box-shaadow:水平，、垂直，阴影

• 背景：background

相关推荐：

全面总结css中属性值继承知识

CSS段落属性详解

20 个 CSS 高级技巧汇总

以上就是最简洁的CSS学习笔记 的详细内容，更多请关注php中文网其它相关文章！

前端(VUE)零基础到就业课程：点击学习

清晰的学习路线+老师随时辅导答疑

自己动手写 PHP MVC 框架：点击学习

快速了解MVC架构、了解框架底层运行原理