CSS的学习【最后编辑2017.7.13】

来源：互联网发布：vba有数据库吗编辑：程序博客网时间：2024/05/22 03:42

CSS意思为层叠样式表，主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

之前我在《写一个html！》里面有写到一些，这里在写一下。

font-size:80px; 设置文本的字体大小

font-weight:lighter/normal/bold/bolder; 设置文本的字体粗细。

weight:20px; 设置块状元素的宽度。

height:20px; 设置块状元素的高度。

color:blue; 设置文本颜色。

background:pink; 设置背景色。

text-align:left/center/right; 设置文本的位置。

line-height:1.6em 设置行间距为1.6em。

1.CSS样式由选择符和声明组成，声明由属性和值组成。

图片来源慕课网，侵删

2.CSS的注释代码格式为/*要注释的内容*/，他不同与HTML的<!--要注释的内容--!>

3.CSS的三种样式

⑴内嵌式/内联式（标签内部）

直接写入body里面的<h1>、<p>、<span>等标签里，而不用在写入head中的<style>里。

举个例子

⑵嵌入式（当前文件中）

所谓嵌入式，就是写入head中的<style>里，这样的好处就是对于多个相同的标签（比如说100个<span>标签）可以同时进行样式的变换。

⑶外部式（外部文件中）

外部式，就是把样式单独的写入一个.css文件当中，然后在HTML的<head>标签中，使用<link>标签链接进来。

格式为：

其中rel="stylesheet" type="text/css"是固定内容不可更改。

三种样式的优先级：

内嵌式>嵌入式>外部式

总的来说就是就近原则，谁离要变换的内容越近，谁的优先级越高。

其中，嵌入式>外部式的前提是，<style>标签在<link>标签的下面，也就是离要变换的内容更近。

像这样：

<head>

<link>

<style>

</head>

4.类选择器

类选择器，就是当你有很多标签的时候，你想要对这些标签这样设置，那些标签那样设置的时候使用。

比如说：

<p>今天天气很热<spanclass=“nanshou”>嗨呀，电脑不好真难受啊，arcgis和ai不能同时打开，这个崩完那个崩</span></p>

我这个<span>标签里现在有个类class，名字是这个"nanshou"。我现在要给这个<span>该样式的话

我就在<style>下面，直接.nanshou{}在这个里面输入我要改的内容就行了。

5.id选择器

使用方法和类选择器类似。

比如说：

<p>今天天气很热<span id=“nanshou”>嗨呀，电脑不好真难受啊，arcgis和ai不能同时打开，这个崩完那个崩</span></p>

不同的在<style>里，id选择器是这样#nanshou{}

6.类选择器和id选择器的不同点：

①类选择器在文档中可以多次使用，而id选择器有且只能使用一次。

②类选择器可以使用词列表方法，如：class="name age" <style>.name{} .age{}</style>。而id选择器不可以使用。

7.子选择器

顾名思义，子选择器就是只选父类的子类，而不管子类的子类。

比如说：

<p class="father "><span>你说<span>前半生</span>就这样吧还有明天</span></p>

>这个符号就是选择父类的子类。

在这两行代码里。第一个span是class="father"的子类，而第二个span则是class="father"的孙子类，是第一个span的子类。

如果你要给第二个span改颜色，就得这样：

8.后代选择器

和子选择器差不多，就是把<style> .father>span{color:red;} </style> 这里的子选择器的>变为后代选择器的 (空格)就行。

两者的区别是：子选择器是选择父类的第一代后代，而后代选择器是选择父类的所有后代。

9.通用选择器

就是选择所有的标签，通通给他们该变样式。

语法：<style> * {color:red;} </style>

10.伪类选择符

他可以给html不存在的标签（标签的某种状态）设置样式。

比如：给鼠标滑过时添加一个样式

<a href="#">哈哈哈哈哈</a>

这样当鼠标滑过哈哈哈哈哈时，就会变为红色。

hover可以用于所有标签，只是由于兼容性的问题，和<a>标签使用最好。

11.分组选择器

当你想为多个标签同时设置一个样式时，使用分组选择器。在一个标签和另一个标签中间使用逗号即可。

比如：

h1,span,p{color:red;}

他就相当于 h1{color:red;} span{color:red;} p{color:red;}

12.CSS的继承

css的某些样式时具有继承性的，举个例子来说下

<style>

p{color:red;}

</style>

<p>你说<span>前半生</span>就这样吧还有明天</p>

像这个，我给p标签给了样式，他就使得整个在p标签里的内容的字体都变成了红色，包括span里的。

也就是说，这个红色的样式不仅应用于p标签，他还应用于p标签下的所有子标签，在这里，span就是p的子标签。

但是，p{border:1px solid red} 这个是不继承的。他只给了p标签加红色的框，并没有给span。虽然前半生这三个字也在红框里面，但是他不是加给span的，如果是加给span的，他会在前半生的前字前面和生字后面有一条竖线。

13.特殊性—权值

有的时候，设置了好多的CSS样式，那么他到底执行哪一个CSS样式代码？他们是通过计算权值来执行的。

权值的规则：

标签的权值为1

类选择器的权值为10

id选择器的权值为100

举个例子：

p{color:red;} 这个的权值是1

p span{color:red;} 这个的权值是1+1=2

p .run{color:red;} 这个的权值是1+10=11

p. #football .run{color:red;} 这个的权值是 1+100+10=111

14.层叠

还是有很多CSS样式表，但是，当他们权值相同时怎么办？？？

说的简单点，就是在三个种样式表的优先级下的就近原则。

内嵌式>嵌入式>外部式

哎呀，上面这句话我还不确定，我是这样想的，如果外部式里的权值大于内嵌式的怎么办，不对不对，只有权值相同才考虑层叠。还是不对，就是外部式比内嵌式权值大怎么办，我回头试一下。上班了。

哈哈哈哈，我试了一下，虽然外部式的优先级没有，啊啊啊啊啊，刚才试的也不对，哎呀，很烦很烦。这个问题留下来，以后再说吧。

我没有放弃，我又试了一下，我给嵌入式里放了2个1权值分别是em和span的标签颜色设置的是red，给外部式里面放了3个1权值颜色设置为blue的标签分别是em，span，p。（em和span为同一修改内容）

结果显示：

虽然外部式的权值3大于嵌入式的权值2，但是代码还是执行的是嵌入式里面的内容。即em和span的颜色为红色，p的颜色为蓝色。

这也就是说，如果是不同的样式表，即使优先级低的权值大于优先级高的权值，还是要遵循优先级的。

2017.7.14 我发现，这个是有前提的，就是要把外部式的link写在嵌入式的style之前。

15.文字排版

①字体

给网页中的文字设置字体

如下：

body{font-family:"Microsoft Yahei"}

②字号颜色

给网页中的文字设置字号颜色

如下：

body{font-size:20px;color:red;} 两个不同设置之间的分号不可不要。否则会运行失败。

③粗体

给网页中的文字设置为粗体

如下：

body{font-weight:bold;}

④斜体

给网页中的文字设置为斜体

如下：

body{font-style:italic;}

⑤下划线

给网页中的文字设置下划线

如下：

body{text-decoration:underline;}

⑥删除线

网页中的文字设置删除线

如下：

body{text-decoration:line-through;}

⑦缩进

给网页中的文字设置缩进

如下：

body{text-indent:2em;} 2em的意思就是文字的2倍大小

⑧行间距（行高）

给网页中的文字设置行间距（行高）

body{line-height:2em;}

⑨中文字间距，字母间距，单词间距

如下：

body{letter-spacing:20px;} 这个是中文字间距和字母间距

body{word-spacing:20px;} 这个是单词间距，对中文无效。

⑩对齐

body{text-align:left/center/right;} 分别是左对齐/居中/右对齐

阅读全文

0 0