CSS语法，引入方式，选择器

最新推荐文章于 2024-07-24 10:05:23 发布

会撸串的傻狍子

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量481

点赞数 1

分类专栏： CSS2 文章标签： css

本文链接：https://blog.csdn.net/L990614/article/details/108476619

版权

CSS2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS语法，引入方式，选择器

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。

CSS它是我们网页的美容师

你跟Angelababy只差了一个妆容的距离

有人说，没有不漂亮的女人，只有不会打扮的女人。

我想说，没有不好看的网页，只有不会CSS的前端。

CSS初识

CSS(Cascading Style Sheets)美化样式

CSS通常称为 CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等

CSS的优点

1.内容与分离。
2.网页的表现统一，容易修改。
3.丰富的样式，使得页面布局更加灵活。
4.减少网页的代码量，增加网页的浏览速度。
5.运用独立于页面的CSS，有利于网页被搜索引擎收录。
6.提高代码的复用率。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。

CSS样式表的引入方式

1、行内样式表（行内式）

行内样式，又有人称内联样式、行间样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

2、内嵌样式表（内嵌式）

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
	<style type="text/CSS">
   	 	选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
	</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type=“text/CSS” 在html5中可以省略。

3、外部链接样式表（外链式）

链入式是将所有的样式放在以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" type="text/css"/>
</head>

该语法中，link标签需要放在head头部标签中，link标签的属性具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

4、导入式样式表（导入式）

导入式是将所有的样式放在以.CSS为扩展名的外部样式表文件中，通过style标签将外部样式表文件，使用@import url()链接到HTML文档中，其基本语法格式如下：

<head>
			<style type="text/css">
				@import url(css文件地址);
			</style>
</head>

导入式加载速度慢，不建议使用

url 统一资源定位符

理论上:行 > 内 > 外链 >导入

实际上:行内式 > 内| 外链 |导入(就近原则)

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

CSS基础选择器

1、通配符（全局）选择器

通配符选择器用“ * ”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

2、标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

其基本语法格式如下：

标签名{
	属性1:属性值1; 
	属性2:属性值2;
    属性3:属性值3; 
    }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

标签选择器可以把某一类标签全部选择出来。

3、类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。标签的类名可以相同。

小技巧：

命名规范：
1.长名称或词组可以使用中横线来为选择器命名。
2.必须以字母开头
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
4.不能和标签同名

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

<head>
        <meta charset="utf-8">
        <style>
        span {
        	font-size: 100px;
        }
        .blue { 
        	color: blue;
        }
        .red {
        	color: red;
        }
        .orange {
			color: orange;
        }
		.green {
			color: green;
		}
        </style>
    </head>
    <body>
    	<span classss="blue">G</span>
    	<span class="red">o</span>
    	<span class="orange">o</span>
    	<span class="blue">g</span>
    	<span class="green">l</span>
    	<span class="red">e</span>
    </body>

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，使用的比较多。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

4、id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{
	属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    }
<p id="id名">内容</p>

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

class选择器：好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器：好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

*** id选择器和类选择器最大的不同在于使用次数上。***

CSS复合选择器

复合选择器是由两个或多个基本选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

5、子选择器

子选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

6、后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

7、并集选择器（群组选择器）

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些元素定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧：

并集选择器是“或” 的意思，就是说，只要逗号隔开的，所有选择器都会执行相应的样式。

比如  .one, p , #test {color: #F00;}  表示.one 和 p 和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

8、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class或id选择器，两个选择器之间不能有空格。

记忆技巧：

交集选择器是并且的意思。即…又…的意思

比如：   p.one   选择的是： p标签中 类名为.one的标签。

用的相对来说比较少，不建议使用。

9、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。

伪类 :hover

为了和我们刚才学的类选择器相区别，类选择器是一个点 比如 .demo {} 而我们的伪类 用2个点，就是冒号
比如  :hover{}

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。

	a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
	}
	a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
	}

10、属性选择器

E[att] ：选择具有att属性的E元素。
E[att="val"]：选择具有att属性且属性值等于val的E元素。 
例如：input[type="text"]

11、相邻选择器E+F

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

12、兄弟选择器E~F

选择E元素后面的所有兄弟元素F。

CSS 三大特性

优先级（特殊性）层叠继承是我们学习CSS 必须掌握的三个特性。

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

1、内联样式表优先级最高；外链样式表和内嵌样式表优先级取决了书写位置，后书写的优先级别高；

2、css样式优先级
权值：
内联样式：         1000
ID选择器：	       100     #p2{}
类选择器：		   10  	  .p1{}
标签选择器：	       1  	  p{}
全局选择器：	       0      *{}

3、!important
!important作用是提高指定CSS样式规则的应用优先权。
color: blue !important;

4、优先级为:
 !important > 行内式 > id > 伪类 |属性|类 > 标签 > 全局 > 继承

简记：!important > 行内样式表> id选择器 > class选择器 > 标签 > 全局> 继承

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。（就近原则）

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

CSS最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

CSS最后的执行口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，**左面的最大，一级大于一级，**数位之间没有进制，级别之间不可超越。皇帝----->太子----->宰相------>丞相

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，属性，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大

权重是可以叠加的

比如的例子：

div ul li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

会撸串的傻狍子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS语法，引入方式，选择器

CSS语法，引入方式，选择器CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。CSS它是我们网页的美容师你跟Angelababy只差了一个妆容的距离有人说，没有不漂亮的女人，只有不会打扮的女人。我想说，没有不好看的网页，只有不会CSS的前端。CSS初识CSS(Cascading Style Sheets)美化样式CSS通常称为 CSS样式表或层叠
复制链接

扫一扫