标签选择器用于修改html元素默认的样式,day043 前端之CSS引入方式、选择器、相关属性...

本节内容：

1、css介绍及语法

2、css的几种引入方式

3、css选择器(如何找到对应的标签)

4、css相关属性

一、css介绍及语法

1、css介绍

层叠样式表

CSS(Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，

给HTML设置样式，让它更加美观。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染)。

2、css语法

每个CSS样式由两个组成部分：选择器和声明。

声明又包括属性和属性值。每个声明之后用分号结束。

/*这是注释*/

二、css的几种引入方式

1、行内样式

行内式是在标签内的style属性中直接设定CSS样式。

不要大规模使用。

HTML

2、内部样式

在html文件的

标签对内，新建标签对中，

嵌入式是将CSS样式集中写html中，

格式如下：

HTML

3、外部样式(推荐使用)

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。

推荐使用此方式。

1、html里写的引入文件语句

HTML

2、css文件的内容格式：

三、CSS选择器(如何找到对应的标签)

1、基本选择器

1、元素选择器(标签名)

选择了这个元素(标签名)，那么该标签中的所有的文字或内容都会一起被修改。

p {color: "red";}

2、ID选择器

# id1{ #号加id属性，后面的id1就是id属性的值

background-color: red; #背景色

color:red; # 是字体颜色 文章下面再具体介绍

}

id不能重复，给多个p标签同时添加一个css样式该怎么办？

看下面的类选择器

3、类选择器

.c1 { .表示class属性，c1表示class的值

font-size: 14px;

}

p.c1 { 找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格昂

color: red;

}

注意：

样式类名不要用数字开头(有的浏览器不认)。

标签中的class属性如果有多个，要用空格分隔。

4、通用选择器

* { *表示所有的标签

color: white;

}

2、组合选择器(重点)

1、后代选择器(子子孙孙，该标签中的所有都生效)

后面所有的都会被影响

/*li(标签名)内部的a标签设置字体颜色*/

li a {

color: green;

}

2、儿子选择器(只找儿子，该标签内的)

仅对该标签内的生效，

/* 选择所有父级是

元素的

元素 */

div>p {

font-family: "Arial Black", arial-black, cursive;

}

4、毗邻选择器(紧跟其后的第一个)

5、弟弟选择器(其后(不含本身)的所有兄弟标签(同级标签)，被选中)

/*i1(id值)内所有的兄弟p标签*/

#i1~p {

border: 2px solid royalblue;

}

3、属性选择器(不常用简单了解)

通过属性或者属性的值来查找，这个属性是我们自己定义的，

不是id啊class啊html自带的属性

/*用于选取带有指定属性的元素。*/

p[title] {

color: red;

}

/*用于选取带有指定属性和值的元素。*/

p[title="213"] {

color: green;

}

hello

1、还有下面这些不太常用的，正则的写法，属性值以什么开头，以什么结尾等

/*找到所有title属性以hello开头的元素*/

[title^="hello"] {

color: red;

}

/*找到所有title属性以hello结尾的元素*/

[title$="hello"] {

color: yellow;

}

/*找到所有title属性中包含(字符串包含)hello的元素*/

[title*="hello"] {

color: red;

}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/

[title~="hello"] {

color: green;

}

4、分组和嵌套

1、分组(多个选择器用逗号分隔)

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，

我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {

color: red;

}

通常，我们会分两行来写，更清晰:

div, #如果你这样写，千万别忘了逗号，不然就成了div下的子子孙孙里面找p标签

p {

color: red;

}

2、嵌套(多种选择器混合起来用)

多种选择器可以混合起来使用，

比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {

color: red;

}

5、伪类选择器(比较特殊，CSS3版本新加的特性)

可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。

6、伪元素选择器(通过css来造标签，不推荐)

这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。

before和after多用于清除浮动。后面讲

1、first-letter(设置首字母、首字的样式)

#将p标签中的文本的第一个字变颜色变大小

p:first-letter {

font-size: 48px;

color: red;

}

2、before(在整个的前面，不是里面的前面)

3、after(在整个的后面，不是里面的后面)

7、选择器的优先级(小难点)

优先级通过权重来确定，权重在html中已经规定好，记住就行

1、首先来看一下css继承

继承是css的一个主要特征，是一种机制，就是默认它的后代会自带它的属性。

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

有一些属性不能被继承，如：border, margin, padding, background等(这些相当于局部作用域)。

例如一个body定义了的字体颜色值也会应用到段落的文本中。

2、选择器的优先级

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

注：内联样式的意思是把css样式写在标签里面：

权重的计算，永不进位

我们看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，

也就是说，不会进位，class组合起来也无法超过id的权重

除此之外还可以通过添加 !important方式来强制让样式生效,万不得已不要用

四、css相关属性

1、宽和高(文本框的大小)

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

2、字体属性(文字大小、粗细)

1、文字字体(楷体)

font-family可以把多个字体名称作为一个“回退”系统来保存。

写多个字体，浏览器会按顺序去使用它可以识别的第一个字体。

2、字体大小(font-size,页面默认16px)

font-size:字体大小;

如果设置成inherit表示继承父元素的字体大小值。

3、字重(font-weight,字的粗细程度)

font-weight用来设置字体的字重(粗细)。

3、文本颜色(color:red,设置文字颜色)

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

1.十六进制值 - 如: ＃FF0000

#前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别(无色)

2.一个RGB值 - 如: RGB(255,0,0)

#红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

3.颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha,

指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

4、文字属性(对齐方式、文字划线)

1、文字对齐(text-align)

text-align 属性规定元素中的文本的水平对齐方式。

fe：

text-align:left;

2、文字装饰(text-decoration，加删除线，下划线)

text-decoration 属性用来给文字添加特殊效果。

fe:去掉a标签默认的自划线：

3、首行缩进(text-indent)

将段落的第一行缩进 32像素：

5、背景属性(颜色、图片、布置方式)

单独写每一条属性，也可以合起来简写

background:#ffffff url('1.png') no-repeat right top;

fe:鼠标滚动但是背景不动，很多电商都在这么搞(类似回到顶部的锚点)

固定显示背景图片

HTML

6、边框(文本框的边框属性，线型、大小、颜色)

1.border-width 宽度

2.border-style 样式

3.border-color 颜色

1、边框样式(线型的说明)

除了可以统一设置边框外还可以单独为某一个边框设置样式

7、border-radius(实现圆角边框，做圆形头像用的)

用这个属性能实现圆角边框的效果。

边框的长和宽相等时，

将border-radius设置为长或高的一半即可得到一个圆形。

边框的长和宽不相等时，

否则就是一个椭圆。

1、在调试窗口调整颜色来测试

(调试窗口：页面上右键--检查，或者f12)

调整好之后，把调整后的值复制到我们的css属性里面就行了

2、通过hover来设置鼠标移动上去变颜色：

你会看到之前的background-color有了一个横线，这是不生效的效果，

因为你查看的hover的样式，还可以看到class

把对勾去了，这个class的样式就不显示了

8、修改当前网页的内容，仅对本页面生效(就自己看的，刷新无效)

不用ps就能够改了：注意昂，只能改当前页面的显示内容，改不了真实的值，

并且页面一刷新，这个指令就失效了，需要重新输入

9、display(块级标签变内联标签，相互转换)

用于控制HTML元素的显示效果。

是块级标签显示，还是内联标签，

或者占位置显示，还是不占位置显示。

1、display:”none”与visibility:hidden的区别：(都是隐藏元素)

display:none; 隐藏某个元素，并且不占用该元素原先的空间，

(记忆：短的none，就是彻底隐藏)

visibility:hidden; 隐藏某个元素，但还占用着元素未隐藏之前的空间，

(记忆：长的，虽然看不见，但还占着位置)

fe:块级标签不管设置宽、高为多少，都会占用你整个页面宽度的空间

10、一些创建标签的快捷方法(html的快捷创建标签)

fe1:快速创建多个标签

fe2：快速创建带类的标签

fe3:div里面嵌套的一个a标签