CSS知识点

CSS常用知识点梳理

1.CSS简介

CSS：级联样式表 （Cascading Style Sheets） 是一种用来设计网页样式的工具。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

2.CSS样式表定义

在网页制作过程中，定义样式表的方法主要由下面3种。

1.通过HTML标签定义样式表

CSS 样式表规则由两个主要的部分构成：选择器，以及一条或多条声明:

引用样式的对象{标签属性:属性值; 标签属性:属性值; 标签属性:属性值;...}

在这里插入图片描述

  • 选择器是用的去掉尖括号的标签名，可以是一个或多个标签(各个标签之间以逗号分开)。例如，p、table等，而不是<p>、<table>。

  • 每个属性与属性值对之间用分号隔开。且属性名为两个或两个以上的单词构成时，单词之间以“-"隔开，如背景颜色属性background-color。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
p
{
	color:green;
	text-align:center;
	background-color:red;
} 
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

2.使用id定义样式表

在HTML页面中，id选择符用来对某个单一元素定义单独的样式，定 id名称前加上一个#。使用id定义样式表的基本语法如下:

#id名称{标签属性:属性值; 标签属性:属性值; 标签属性:属性值;...}

使用时只需要将要用该样式的网页内容前加一个 id="id名称"。案例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
#aaa
{
	text-align:center;
	color:green;
	background-color:red;
} 
</style>
</head>

<body>
<p id="aaa">Hello World!</p>
<p>我不受aaa样式的影响。</p>
</body>
</html>

在这里插入图片描述

3.使用class定义样式表

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 CSS类有两种定义格式，定义时，在自定义类的名称前加一个点"."号显示

  1. 标签名.类名{标签属性:属性值:标签属性:属性值;标签属性;属性值;...}

    这种格式的类指明所定义的样式只能用在类名前所指定的标签上。例如: hl.center{color:red;}说明该center 类的样式只能用在<h1>标签上。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
.center{text-align:center;}		/*第一种*/

h1.center{color:red;background-color:green;}		/*第二种*/
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

在这里插入图片描述

3.HTML里加CSS方法

在HTML中加人CSS的方法主要有3种:嵌人式样式表、内联式样式表、外联式样式表。下面分别对这3种方法做简单介绍。

3.1嵌入式样式表

嵌人式样式表只要在需要应用样式的HTML标签上添加CSS属性就可以，这种方法主要用于对具体的标签做具体的样式设置，其作用范围只限于本标签。 将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。要慎用这种方法！ 当样式仅需要在一个元素上应用一次时，使用内联样式，例如:

<p style="color:red; font-size:10pt">使用嵌入式样式表</p >

这个样式表只是让当前的<p></p>标签对中的文字为红色,字体大小为10磅。

3.2内联式样式表

内联式样式表利用<style></style>标签对将样式表定义在HTML 文档的<head></head>标签对之间，内联式样式表的作用范围是定义所在的HTML文档。如上述的例子，都是内联式展示。

3.3外联式样式表

外联式样式表是将定义好的CSS单独放到一个以css为扩展名的纯文本文件中，再使用<link>标签链接到网页中。
这种方法的最大好处就是，定义一个样式可以用到大量网页中,从而使整个站点风格保持一致，避免重复的CSS属性设置。另外,当遇上某些重大调整要对风格进行修改时，可直接修改CSS文件，而不用打开每个网页进行修修改。 当样式需要应用于很多页面时，应该采用外联式。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
<**link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径) **>

3.4 CSS优先级

CSS是级联样式表，级联是指继承性，即在标签中的套的标签继承外层标签的样式级联的优先级顺序是嵌入式样式表(优先级最高)、内联式样式表、外联式样式表、浏览器默认(优先级最低)。当样式表继承遇到冲突时，总是以最后定义的样式为准。例如:

<div style="color:blue;font-size:20pt">
	<p style="font-size:25pt">段落文本</p >
</div>

因为<p></p >标签嵌套在<div></div>标签之间，所以，<p></p >标签中的文本内容样式将继承<div>样式设置，文字颜色是蓝色，而font-size属性值继承后发生冲突，所以，以最后定义的<p>属性值为准,字体大小为25磅。

4.选择器

4.1层次选择器

层次选择器主要分为四种：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器

![在这里插入图片描述]( https://img-blog.csdnimg.cn/5beba78cff2b4ee89fb42ce6da66c201.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MzgxMjA3,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述]( https://img-blog.csdnimg.cn/7affd7bbfe39494a8923776d3b6139a7.jpg?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MzgxMjA3,size_16,color_FFFFFF,t_70#pic_center)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>层次选择器</title>  
<style>
body p{
	background: red;
}
body>ul{
	background: green;
}
body>p{
	background: yellow;
}
.active + p{
	background: blue;
	color:red;
}

</style>
</head>
<body>
<p class="active">body结构下的元素1</p>
<p>body结构下的元素2</p>
<p>body结构下的元素3</p>
<ul>
	<p >body结构下的元素4</p><!--元素4的p不是body的子代,真正子代是ul-->
	<li>
		<p>body结构下的元素4.1</p><!--4.1的p不是body的子代,真正子代是ul-->
	</li>
	<li>
		<p>body结构下的元素4.2</p>
	</li>

</ul>
</body>
</html>

运行结果如下图：

![在这里插入图片描述]( https://img-blog.csdnimg.cn/cfe761ffa6e04835878403c4303525de.jpg?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MzgxMjA3,size_16,color_FFFFFF,t_70#pic_center)

4.2结构伪类选择器

结构伪类选择器是根据元素在文档中所处的位置（一般带有冒号：），来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 常用的语法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>层次选择器</title>  
<style>

/*ul的第一个子元素*/
ul li:first-child{
	background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
	background: green;
}
p:nth-child(2){
	background: yellow;
}
/*选择父元素下p的第二个*/
p:nth-of-type(2){
	background: blue;
}
</style>
</head>
<body>
	<h1>标题1</h1>
<p class="active">body结构下的元素1</p>
<p>body结构下的元素2</p>
<p>body结构下的元素3</p>
<ul>
	<li>
		<p>body结构下的元素4.1</p><!--4.1的p不是body的子代,真正子代是ul-->
	</li>
	<li>
		<p>body结构下的元素4.2</p>
	</li>
	<li>
		<p>body结构下的元素4.3</p>
	</li>

</ul>
</body>
</html>

![在这里插入图片描述]( https://img-blog.csdnimg.cn/981796aed30147cba5cba8659e90eb72.jpg?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MzgxMjA3,size_16,color_FFFFFF,t_70#pic_center)

4.3属性选择器

属性选择器是通过查找标签里的命名或者属性来找到满足条件的元素，其中常用的有

  1. E[attr] 选择有attr 属性的 E元素
  2. E[attr=val] 选择 attr 为 val 的 E元素
  3. *E[attr = val] 只要E元素的 attr 属性值里含有 val 就能被选择
  4. E[attr ~= val] E元素中的 attr 属性的属性值 val 单独存在或存在的属性值与其他属性值之间用空格隔开就能被选择
  5. E[attr ^= val] E元素的 attr 属性值中val在最前面才能被选择
  6. E[attr $= val] E元素的 attr 属性值中val在最后面才能被选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>层次选择器</title>  
<style>

a[id]{
	color:red;
}
a[id=cc]{
	color:green;
}
a[class *= first]{
	background-color:yellow;
}
a[href ^= www]{
	font-style:italic;
}
a[href $= doc]{
	font-family:楷体;
}
</style>
</head>
<body>
	
<div class="box">
	<a href="www.a.com" class="" id="dd">属性选择器1</a>
	<a href="www.b.com" class="first_one" >属性选择器2</a>
	<a href="a.doc" class="first_two" id="cc">属性选择器3</a>
	<a href="#" class="one_first_only">属性选择器4</a>
	<a href="b.doc" class="" id="last">属性选择器5</a>
</div>

</body>
</html>

5.文本属性

  1. 文本颜色

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

    • 十六进制值 - 如: ＃FF0000
    • 一个RGB值 - 如: RGB(255,0,0)
    • 颜色的名称 - 如: red
    • RGBA颜色 - 如：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）间的参数。

  2. 文本的对齐方式： 文本可居中或对齐到左或右,两端对齐 。

  3. 文本修饰： text-decoration属性主要是用来删除链接的下划线，

    例a

  4. 文本转换： 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

    p.tryuppercase {text-transform:uppercase;}
p.trylowercase {text-transform:lowercase;}
p.trycapitalize {text-transform:capitalize;}

  5. 文本缩进 ，如Word文档里的首行缩进 p

  6. 设置字符间距 h1

  7. 设置行高 p.setheight

  8. 设置字体阴影 p

  9. 字体间距： p

6.链接样式

有四个超链接状态是

  • a:link - 正常，未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

    当设置为若干链路状态的样式，也有一些顺序规则：

    • a:hover 必须跟在 a:link 和 a:visited后面
    • a:active 必须跟在 a:hover后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:red;}      /* 未访问链接*/
a:visited {color:green;}  /* 已访问链接 */
a:hover {color:pink;}  /* 鼠标移动到链接上 */
a:active {color:blue;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>
</html>

7.列表属性

  1. 不同列表项的标记
    • ul.a {list-style-type:circle;} 空心圆
    • ul.b {list-style-type:square;} 实心正方形
    • ol.c {list-style-type:upper-roman;} 罗马数字顺序
    • ol.d {list-style-type:lower-alpha;} 字母顺序
    • ul {list-style-image:url('sqpurple.gif');} 图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul{
  list-style-type: none;  /*移除默认设置*/
  margin: 0;
  padding: 0;
	background-color:#a0a0a0;
}
</style>
</head>
<body>
<h1>商品列表</h1>
<ul>
<li><a href="#">帽子</a>&nbsp &nbsp<a href="#">衣服</a>&nbsp &nbsp<a href="#">裤子</a></li>
<li>
    <a href="#">书籍</a>&nbsp &nbsp<a href="#">笔</a>&nbsp &nbsp<a href="#">电子产品</a></li>
<li>
      <a href="#">耳机</a>&nbsp &nbsp<a href="#">包包</a>&nbsp &nbsp<a href="#">鞋子</a></li>
</ul>
</body>
</html>

在这里插入图片描述

CSS的样式种类内容太多，推荐大家去看菜鸟教程中的CSS案列教程，里面把各种属性都分析展现的挺透彻的，是一个很适合学习的网站。小编在这里就不逐一分析展示了。另外CSS通常会去套用模板，现在市场上有很多开源的平台，都有很多CSS模板。例如：源码之家；模板之家；layui；飞冰；element等等

posted @ 2021-07-24 17:08  cs_congs  阅读(325)  评论(0)    收藏  举报