[二]HTML+CSS基础(学习笔记)

CSS

CSS定义

CSS（Cascading Style Sheets）层叠样式表
所谓层叠，可以将网页想象成一层一层的结构，层次高的将会覆盖层次低的

CSS作用

为网页创建样式表，通过样式表可以对网页进行装饰。CSS可以为网页的各个层次设置样式

如何看网页时一层一层的呢？

此时需要用到插件(tilt_3d-1.0.1-fx.xpi)，关于插件你可以去浏览器中下载也可以去我的百度云中下载，下载地址：http://pan.baidu.com/s/1jI6rahK
下载好之后直接把软件拖拽到火狐浏览器中，即会提醒安装：

install.png
安装好之后：(按住alt键)

tilt.png
出现的效果，可以看出是层叠的

later.png

如何使用CSS样式表

1.可以将CSS样式编写到元素的style属性中去,即内联样式,内联样式属于结构和行为耦合，不方便后期的维护，不推荐使用

不忘初心，方得始终

>2.也可以将css样式编写到中的不忘初心，方得始终 >3*.可以将CSS写到外部的css文件中去，比如：style.css,然后通过link标签将外部的css文件引入到当前页面中，这样外部文件的css样式表就会应用到当前页面中,完全使结构表现分离，可以使样式表在不同页面使用。通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高用户体验 p{ color: red; font-size: 20px; } + #####CSS语法 - CSS注释： /* */ - 1.声明块：紧跟在选择器后面，使用一对大括号{}括起来，实际上就是一组一组的名值对结构，一组一组的名值对我们成为声明，在一个声明块中，可以写多个声明，多个声明，使用分号隔开声明名和声明值用：连接 - 2.CSS 选择器：可以选中页面中指定元素，并且将声明块中的样式应用到选择器对应的元素中 > ######一.常用选择器 + 1).元素选择器：通过元素选择器，可以选中页面中所有指定元素,比如： ``` /*语法：元素名{}*/ p{ color: red; font-size: 20px; } ``` + id选择器：通过元素的id属性值，选中**唯一的一个**属性 ``` /*语法：#id属性值{}*/ 网页标题网页正文不忘初心，方得始终不忘初心，方得始终 ``` + 类选择器：通过元素的class 属性值选中**一组**元素,并且可以为一个元素设置多个class 属性值，多个属性值用空格隔开 /语法：.class属性值{}/ .p2{ font-size: 45px; } .hello{ color: yellow; } 不忘初心，方得始终不忘初心，方得始终 + 选择器分组(并集选择器)：可以同时选中多个选择器对应的元素 /语法：选择器1,选择器2,选择器N{}/ .p2, #p1, .hello{ background-color: yellow; } + 通配选择器：用来选中页面所有的元素 /* 语法：*{} */ *{ margin: 0 auto; } + 复合选择器(交集选择器)：可以选中同时满足多个选择器的元素比如：为拥有class为p3的span元素设置背景色。**对于id选择器不建议使用复合选择器，因为id选择器本身就具有唯一性** /语法：选择器1选择器2选择器N{}/ span.p3{ background-color: yellow; } > ######二.子元素和后代元素选择器 **元素之间的关系：** 1).父元素：直接包含子元素的元素 2).子元素：直接被父元素包含的元素 3).祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素 4).后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 5).兄弟元素：拥有相同父元素的元素叫做兄弟元素 + 后代元素选择器：选中指定元素的指定后代元素，例如：为div中的span设置一个颜色为绿色 /语法：祖先元素后代元素{}/ div span{ color: green; } /注意：祖先元素和后代元素中间有一个空格/ + 子元素选择器：选中指定父元素的指定子元素 /语法：父元素>子元素{}/ div>span{ color: green; } + 兄弟元素选择器 /语法：前一个 + 后一个{} 选中后面紧挨着的一个兄弟元素/ 网页正文不忘初心，方得始终1 不忘初心，方得始终2 不忘初心，方得始终3 aaa 不忘初心，方得始终4 不忘初心，方得始终5 /========================/ 网页正文不忘初心，方得始终1 不忘初心，方得始终2 不忘初心，方得始终3 aaa bbb 不忘初心，方得始终4 不忘初心，方得始终5 /********************************************************/ /********************************************************/ /语法：前一个 ~ 后一个{} 选中后面所有的兄弟元素/ >######三.属性选择器:可以根据元素中的属性或属性值来选取指定元素 ``` 不忘初心，方得始终不忘初心，方得始终不忘初心，方得始终不忘初心，方得始终不忘初心，方得始终不忘初心，方得始终 ``` > ######四.伪类选择器：伪类专门用来表示元素的一种特殊的状态，比如访问过的超链接和普通的超链接 + :link 表示普通的连接 ``` /*为没访问过的链接设置为绿色*/ a:link{ color:green; } /**/ + :visited 表示访问过的链接**(浏览器是通过历史记录来判断是否访问过)** 【由于涉及到用户隐私问题，所以使用visited只能设置字体的颜色】 ``` /为访问过的连接设置一个红色/ a:visited{ color:red; } ``` + :hover 表示鼠标移入时的状态(其他元素也可以使用，不只是只有a可以使用 IE6不支持) ``` a:hover{ color:yellow; } ``` + :active 表示超链接被点击的状态(其他元素也可以使用，不只是只有a可以使用 IE6不支持) ``` a:active{ color:black; } ``` + :focus 获取焦点 ``` input:focus{...} ``` + ::selection 选中的元素(在火狐中需要采用另一种方式实现) ``` /火狐中的使用方法/ P:-moz-selection{} /其他浏览器的使用方法/ p:selection{} ``` + :not 否定伪类从以选中的元素剔除某些元素 /*为所有的p元素设置一个背景色，除class为hello 的p元素*/ /*语法 :not(选择器){}*/ 不忘初心，方得始终1 不忘初心，方得始终2 不忘初心，方得始终3 五.子元素伪类选择器 :first-child选择第一个子标签，是所有的子元素的第一个 :last-child选择最后一个子标签，是素有的子元素的最后一个 :nth-child选择指定位置的子标签,even表示偶数位置的子元素，odd表示奇数位置的子元素 :first-of-type :last-of-type :nth-of-type选择指定类型的子标签，是当前类型子元素的第一个，最后一个 ```

网页正文

不忘初心，方得始终1

不忘初心，方得始终2

不忘初心，方得始终3

```

> ######六.伪元素：使用伪元素来表示元素中的一些特殊的位置

+ :first-letter 首字

+ :first-line首行

  ```

/让第一个字有单独的样式/
p:first-letter{.....}

不忘初心，方得始终

```
+ :before 或者 :after 表示元素最前面的部分【一般before都需要结合content样式一起使用，通过content可以向before或before添加一些内容】

  ![bifore.png](http://upload-images.jianshu.io/upload_images/3063110-7b50e431a27f1666.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  ```

p:before{
content: "我会出现在整个段落的最前面";
color: red;
}


![content.png](http://upload-images.jianshu.io/upload_images/3063110-3032f4b511f0ef73.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

[二]HTML+CSS基础(学习笔记)

CSS

CSS定义

CSS作用

如何看网页时一层一层的呢？

如何使用CSS样式表

网页正文

五.子元素伪类选择器

你可能感兴趣的:([二]HTML+CSS基础(学习笔记))