CSS学习总结

总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。

一.CSS概述

1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术 。

使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力

2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

                 选择器通常是需要改变样式的 HTML 元素。

                 每条声明由一个属性和一个值组成。

                 属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

 

二.在HTML里引入CSS

1.通过内联样式 (style属性)

第一种方式是通过标签上的style属性为当前元素设置CSS样式

如果CSS样式属性非常多，就会造成页面结构的混乱，而且代码得不到复用，因此这种方式不推荐大量使用。

    这是一个div...

2.通过内部样式表 (sytle标签)

第二种方式是通过head标签内部的style标签，书写CSS代码来引入CSS样式。

span111

span222

span333

Css引入:



    

这种方式将所有的CSS属性放在一个style标签内部统一管理，可以将设置样式的CSS代码和展示数据的HTML代码进行初步的分离。

3.通过外部样式表 (link链接)

当CSS代码特别多的时候，可以将CSS代码统一写在一个独立的文件中，文件的后缀名为.css，在HTML文件中引入CSS文件即可。

在HTML中引入css文件

4.多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

5.多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

优先级顺序

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

    
    
    
    


    
测试！

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

 

三.CSS选择器

1.基本选择器

       1.1 元素名（标签名）选择器

                    根据元素的名称选中元素进行修饰

                    格式：元素名称{CSS属性}

/* 1.标签名选择器

将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为24px，字体加粗

 */

span{

    background:#DDA0DD;

    font-size:24px;

    font-weight:bolder;

}

        1.2 class（类）选择器

           通过标签上通用的属性-class，通过class属性可以为当前标签设置所属的类（分组），class值相同的则为一类，可以通过class选择器选中这一类的元素统一来设置样式。

            格式：.class值{css属性}

/* 2.类(class)选择器

(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#8FBC8F, 字体颜色为绿色

(2)将div1下的span和内容为"span111"的span字体颜色设置blue, 背景颜色设置为#F0E68C

 */

.c1{/* 选中所有class值为c1的元素 */

    background:#8FBC8F;

    color:green;

}

.c2{

    background:#F0E68C;

    color:blue;

}

另外, 一个标签(元素)可以设置多个class值:



    span111

          表示该元素同时属于多个分组, 多个分组的样式都会同时作用在该元素上.

           如果样式冲突, 采用就近原则, 后面的会覆盖前面的样式.

    1.3 ID选择器

          通过标签上通用的属性-id，可以为当前元素设置所属的编号，注意编号的值是独一无二的，可以通过ID选择器选中指定ID的元素进行样式的修饰。

           格式：#id值{CSS属性}

/* 3.id选择器

用id选择器将第一个p标签设置字体加粗, 首行文本缩进20px.

 */

#p1{

    font-weight:bolder;

    text-indent:20px;

}

2.复杂选择器

2.1 后代选择器

在父选择器选中元素的内部，再选中内部指定的后代元素

 格式：父选择器 后代元素选择器{CSS属性}

/* 1.后代选择器

将div下所有的span标签的字体大小设置为22px, 背景颜色设置为#DDA0DD

 */

#d1 span{/* 选中ID值为d1元素内部的所有span元素*/

    font-size: 22px;

    background: #DDA0DD;

}

 2.2 子元素选择器

在父选择器选中元素的内部，再选中内部指定的子元素

格式：父选择器>子选择器{CSS属性}

/* 2.子元素选择器

将div下所有的span子元素标签的字体大小设置为16px, 背景颜色设置为#DEB887

 */

#d1>span{/* 选中id值为d1元素内部的所有span子元素 */

    font-size:16px;

    background:#DEB887;

}

2.3 分组选择器

将多个选择器选中的元素综合在一起，统一样式设置

格式：选择器1，选择器2，。。。。选择器n{CSS属性}

/* 3.分组选择器

将span1、span2和 p标签下的 span的背景颜色设置为 #F4A460

 */

.c1,.c2,#p1 span{/* 获取所有class值为c1的或class值为c2的以及id值为p1元素下的span元素 */

    background:#F4A469;

}

2.4 属性选择器

根据选择器+属性条件选中符合要求的元素

格式：选择器[属性条件]{CSS属性}

/* 4.属性选择器

(1)将所有有class属性的元素的边框设置为2px、实线、红色.

(2)将所有的type="text"的标签的背景颜色设置为red, 设置字体首行缩进10px

 */

*[class]{

    border:2px solid red;

}

input[type='text']{

    background: red;

    text-indent: 10px;

    color:#FFFFFF;

}

2.5 相邻兄弟选择器

如果两个元素具有相同的父元素，并且两个元素是紧挨着的，这两个元素就是相邻兄弟，可以通过相邻兄弟选择器选中大哥后面的小弟。

格式：大哥+小弟{CSS属性}

/* 5.相邻兄弟选择器

(1)将id为p1元素后面的p元素的背景颜色设置为 #DB7093 */

#p1+p{/* 获取id值为p1元素后面紧邻的兄弟p元素*/

    background: #DB7093;

}

（2）将id值为div1后面所有的span兄弟元素

#div1~span{}

2.6 伪元素选择器（了解）

根据选择器以及元素的状态选中元素

格式：选择器:状态{CSS属性}

/* 6.伪元素选择器

(1)当鼠标移入div下的a标签上时, 为其设置如下状态: 字体为blue, 字体大小为28px. 边框: 1px solid red, 并且文本内容没有下划线.

(2)给div下的第一个a元素设置背景颜色为 green.

 */

div a:hover{

    color:blue;

    font-size:28px;

    border:1px solid red;

    text-decoration: none;

}

div a:first-child{

    background:green;

}

div a:last-child{

    background:cyan;

}

 

四.盒子模型

所谓盒子模型，在HTML里，所有页面元素都可以看成一个一个的框（盒子），这些元素与元素之间的距离，元素的边框，元素与元素之间的距离都会影响元素的位置和元素本身的宽和高。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

1.matgin外边距

元素与元素之间的距离叫做外边距

margin-top:40px;

margin-left:30px;

margin-bottom: 40px;

margin:10px 20px 30px 40px;/* 上 右 下 左 */

margin:10px 20px 30px;/*上 左右 下*/

margin:10px 20px;/*上下 左右*/

margin:10px;/*上下左右*/

垂直外边距的合并现象：如果两个元素在垂直方向的外边距相遇时，将会有合并的现象，合并后的结果是，取两个外边距之中的较大者来作为两个元素的外边距！

如何让块级元素居中显示：margin：0px auto；（左右自适应）

2.border边框

n多样式，百度

3.padding内边距（填充）

padding-top:40px;

padding-left:30px;

padding-bottom: 40px;

padding:10px 20px 30px 40px;/* 上 右 下 左 */

padding:10px 20px 30px;/*上 左右 下*/

padding:10px 20px;/*上下 左右*/

padding:10px;/*上下左右*/

   元素的实际宽度=元素设置的宽度+元素的左右边框宽度+左右内边距+左右外边距

   元素的实际高度=蒜素设置的高度+元素的上下边框宽度+上下内边距+上下外边距

 

五.常用CSS

1.display属性

1.1 块级元素（block）

默认情况下，块级元素独占一行

如果可以设置宽和高，就是设置宽和高

如果不设宽和高，其中宽是默认填满父元素，而高是由内容决定（由内容支撑）

外边距/边框/内边距都可以设置

1.2 行内元素（inline）

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距/边框/内边距都可以设置，上下外边距设置无效

1.3 行内块元素（inline-block）

既具备悍内元素的特征（可以同行显示），还具备块元素的特征（可以设置宽和高）

2.文本属性

2.1 text-align：设置元素中文本水平对齐方式，其常用值为

left:默认值，左对齐

right:右对齐

center:居中对齐

justify:两端对齐

2.2 text-decoration：设置文本下划线，主要用来删除链接的下划线

underline：有下划线

none：没有下划线

2.3 letter-spacing：设置字符集按个/间距，常用值为

normal

像素值

2.4 text-shadow：设置字体阴影，取值为

像素值 像素值 像素值 颜色值

第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色。

2.5 颜色

(1)颜色名称, 比如: red, green, blue

(2)rgb三基色, 比如: rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)

(3)#XXXXXX, 比如: #FF0000, #00FF00, #0000FF

2.6 text-transform：大小写转换

（1）uppercase，全大写

（2）lowercase，全小写

（3）capitalize，首字母大写

2.7 text-indent：首行缩进

...

3.字体属性

font-size：设置字体大小

font-weight：设置字体粗细

font-family：设置字体

color：设置字体颜色

line-height：设置行高

font-style：指定文本样式（斜体，正常...）

...

4.背景属性

background-color：设置背景颜色

background-image：设置背景图片

background-repeat：设置或检索对象的背景图像是否及如何铺排

background-position：设置或检索对象的背景图像位置

background-size：设置背景图片的大小

简写属性：

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上属性无需全部使用，你可以按照页面的实际需要使用

5.链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

常见的链接样式：①背景②文本修饰

文本修饰
text-decoration 属性主要用于删除链接中的下划线：

实例
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色
背景颜色属性指定链接背景色：

实例
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

6.列表属性

有序，无序列表样式

7.表格属性

不同颜色，不同对齐，单双行底色....

8.Display（显示）与Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

9.Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

10.Position（定位）

position 属性指定了元素的定位类型。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position 属性的五个值：

• static：默认值，没定位。
• fixed：相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
• relative：相对定位元素的定位是相对其正常位置。
• absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么他的位置相对于
• sticky:粘性定位，依赖于用户的滚动，在绝对与相对之间切换

11.Overflow（布局）

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

12.Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

13.水平/垂直对齐

margin: auto 元素居中对齐

text-align：center 文本居中对齐

margin：auto 图片居中对齐

position：absolute 左右对齐(也可以float：right/left )

padding 垂直居中对齐

padding 和 text-align: center   水平和垂直都居中

14.导航栏

垂直导航栏/水平导航栏

15.下拉菜单

下拉菜单，下拉左对齐/右对齐

16.Tooltip（提示工具）

上显示，下显示，左显示，右显示，加箭头，淡入效果。

17.图片框

18.图像透不透明

透明度是 opacity

 

其他

width：设置元素的宽度

height：设置元素的高度