html5自学日记,前端学习日记 (三)

css的引入

在早期,如果要去定义一个h1的标题的颜色、字体、大小和其他的显示特征,就需要用到html中的font或其他样式的指令,h1只是一个结构指令所以光有它是不够的。因此如果有多个标签要去进行处理,就会造成样式的重复,后期维护的困难。

那css的出现就解决了这一类的问题,css(cascading style sheets),即层叠样式表、阶层样式表,它是一种用来为结构化文档(如html文档或xml应用)添加样式(字体、间距和颜色等)的计算机语言。

css的基本引入

通过html文件中的link标签引入css文件

1.通过link引入css文件

html程式码:

网页示例

hello world!

css程式码:

p{

color:red;

}

2.使用style标签

html程式码:

网页示例

p{

color:red;

}

hello world!

3.直接在标签中更改样式

html程式码:

网页示例

hello world!

css结构

选择器相遇要更改标签样式的前提条件

css基本选择器

选择器查找标签的方式

1.标签选择器

这种选择器如果对于同一种类的标签会一起修改相同的样式,因此对于通用的样式时候可以选择标签选择器

html程式码:

网页示例

网页设计

css程式码:

/*css程式码*/

h1{

color:blue;font-size:48px;

}

网页效果:

2.id选择器

选择器所表现出的样式具有独一无二的效果,id选择器优先级比标签选择器高

html程式码:

网页示例

网页设计

css程式码:

/*css程式码*/

#i1{

color:orange;font-size:60px;

}

网页效果:

3.类选择器

这一类标签需要用同一种样式的时候需要用到类选择器

html程式码:

网页示例

水蜜桃

猕猴桃

苹果

香蕉

css程式码:

/*css程式码*/

.c1{

color:pink;font-size:60px;

}

网页效果:

4.通用选择器

默认使用这一种样式

/*css程式码*/

*｛

color:black;

｝

css组合选择器

1.子代选择器

html程式码:

网页示例

我是嵌套在div中的p标签

我是嵌套在div中的span标签

我是嵌套在div中的div中的p标签

我是嵌套在div中的div中的span标签

css程式码:

/*css程式码*/

#d1>p{

color:blue;font-size:20;

}

网页效果:

2.兄弟选择器

之后标签都会统一更改样式

html程式码:

网页示例

第一段

div标签

第二段

第三段

第四段

第五段

---

第六段

css程式码:

/*css程式码*/

div~p{

color:green;font-size:20;

}

网页效果:

3.相邻兄弟选择器

这种方式它只会往下找相邻的标签

html程式码:

网页示例

第一段

div标签

第二段

第三段

css程式码:

/*css程式码*/

div+p{

color:blue;font-size:20;

}

网页效果:

4.后代选择器

html程式码:

网页示例

我是嵌套在div中的p标签

我是嵌套在div中的span标签

我是嵌套在div中的div中的p标签

我是嵌套在div中的div中的span标签

css程式码:

这里对于id为d1的标签的后代只要是p标签都会用一样的css样式

/*css程式码*/

#d1 p{

color:red;font-size:20;

}

网页效果:

css属性选择器

可以给一个标签去自定义一个属性,通过这个属性来改变这一类或这一个标签的样式

html程式码:

网页示例

hello css!

hello css!-abc

hello css!-abc123

hello css!-123abc

hello css!-abcabcabc

hello css!- abc

hello css!-xsdda

1.查找标签元素里有"attribute"的属性

css代码:

/*css程式码*/

[attribute]{

color:blue;

}

网页效果:

2.查找属性是"abc"的标签

css代码:

/*css程式码*/

[attribute="abc"]{

color:blue;

}

网页效果:

3.查找属性使用空白分开的字串中其中是“abc”

css代码:

/*css程式码*/

[attribute~="abc"]{

color:blue;

}

网页效果:

4.查找属性是以"abc"开头的元素

css代码:

/*css程式码*/

[attribute^="abc"]{

color:blue;

}

网页效果:

5.查找属性是以"abc"结尾的元素

css代码:

/*css程式码*/

[attribute$="abc"]{

color:blue;

}

网页效果:

6.查找属性至少出现过一次"abc"

css代码:

/*css程式码*/

[attribute*="abc"]{

color:blue;

}

网页效果:

分组和嵌套

当有不同的标签样式有重复的时候可以用到分组

html程式码:

分组和嵌套示例

这是一个div标签

这是一个p标签

css程式码:

/*css程式码*/

#d1,

p{

color:gold

}

网页效果:

把多种选择器混合起来使用就是嵌套

html程式码:

分组和嵌套示例

1

2

3

css程式码:

/*css程式码*/

.c1 p{

color:red

}

网页效果:

像上面的组合选择器也都是有用到嵌套

css选择器的优先级

样式文件优先级:选择器都一样的情况下,谁靠近标签谁就生效,例一:

html程式码:

选择器的优先级

我是一个div标签

我是一个p标签

第一个css档程式码:

/*css程式码*/

#d1,

p{

color:red;

}

第二个css档程式码:

/*css程式码*/

#d1,

p{

color:gold;

}

网页效果:

那如果把p标签中语句稍加改动

我是一个p标签

那这里的p标签就会变为蓝色,因此像这种内联样式(直接在标签里面写style)它的优先级最高

例二，html程式码:

选择器的优先级

我是一个div标签

我是一个p标签

第一个css档程式码:

/*css程式码*/

/*权重值为100 + 1*/

#d1,

p{

color:red;

}

/*权重值为100*/

#p1{

color:deeppink;

}

第二个css档程式码:

/*css程式码*/

/*权重100 + 1*/

#d1,

p{

color:gold;

}

网页效果:

因为id选择器的权重比元素选择器的权重更高所以最后的颜色是deepink,但是权重计算永不进位,比如说写了十个类选择器加起来就是100,但是按照规则它还是没有id选择器来得大

另外如果想要让一种样式强制生效就可以使用!important(不推荐使用),会导致后期维护麻烦

/*css程式码*/

#d1,

p{

color:blue!important;

}