Web前端复习-4、CSS语言基础

最新推荐文章于 2023-10-16 00:42:35 发布

今天也是爱大大的一天吖

最新推荐文章于 2023-10-16 00:42:35 发布

阅读量438

点赞数 1

分类专栏：复习文章标签： html css

本文链接：https://blog.csdn.net/qq_45560350/article/details/106782162

版权

复习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.CSS（层叠样式表）概述

在页面排版时，内容与样式的混合设计方式将导致页面代码过于臃肿、难于维护，也不利于搜索引擎的检索
CSS（层叠样式表）的出现，将页面内容与样式彻底分离，极大改善了HTML在页面显示方面的缺陷
使用CSS样式表可以控制HTML标签的显示样式，如页面的布局、字体、颜色、背景和图文混排等效果
在网站的风格方面，一个CSS样式文件可以在多个页面中使用，当用户修改CSS样式文件时，所有引用该样式文件的页面外观都随之发生改变

CSS基本语法结构

样式是CSS的基本单元，每个样式包含两部分内容：

选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；
声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束

CSS基本格式：
在这里插入图片描述

其中，一个选择器可以包含有一个或多个声明。
在CSS样式声明中，书写格式可能有所不同，但应遵循以下规则：

第一项必须是选择器或选择器表达式
选择器之后紧跟一对大括号
每个声明是由属性和属性值组成，且位于大括号之内
声明之间需以英文分号进行间隔
最后一个声明后面的英文分号可以省略

2.CSS（层叠样式表）的使用

CSS样式有三种格式：内嵌样式、内部样式和外部样式。

2.1 内嵌样式（Inline Style Sheet）

内嵌样式又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。

<p style="color:red; background: yellow;">内嵌样式-style属性</p>

在这里插入图片描述

2.2 内部样式表（Internal Style Sheet）

内部样式表将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。

内部样式表是一种写在<style>标签中的样式声明，仅对当前页面有效
在<style>标签中定义CSS样式，然后在页面中使用CSS样式
一般情况下，<style>标签位于<head>标签之内
在页面加载过程中，先加载样式后加载页面元素，浏览器根据元素的顺序加载、渲染并在页面中显示出来。

注意：
属于HTML的注释，CSS样式表中的注释应采用/* 注释内容 */格式

2.3 外部样式表（External Style Sheet）

外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。

网站统一引用同一外部样式文件，使页面的风格保持一致，有利于页面样式的维护与更新，从而降低网站的维护成本。
用户浏览网页时，CSS样式文件会被暂时缓存；继续浏览其他页面时，会优先使用缓存中的CSS文件，避免重复从服务器中下载，从而提高网页的加载速度。
外部样式表又分两种：链接外部样式表和导入外部样式表

2.3.1 链接外部样式表（推荐）

在HTML中<link>标签用于将文档与外部资源进行关联，经常用于链接网页的外部样式表.

<link type="text/css" rel="stylesheet" href="url" />

其中：

type属性用于设置链接目标文件的MIME类型【(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型】，CSS样式表的MIME类型是text/css
rel属性用于设置链接目标文件与当前文档的关系，stylesheet表示外部文件的类型是CSS文件

链接外部样式的使用分为两步，具体步骤如下：
1）创建CSS样式表文件

@charset "utf-8";
/*h1标签的样式声明*/
h1{color:#033;border:dashed 1px #6600CC;}
/*hr标签的样式声明*/
hr{width:95%;text-align:center;color:#03C;}
/*span标签的样式声明*/
span{font-weight:bold;}

关键字 @charset 用于指定样式表使用的字符集；该关键字只能用于外部样式表文件中，并位于样式表的最前面，且只允许出现一次。

2）在页面的标签中使用标签关联style.css样式文件，然后在中通过标签选择器引用样式文件中预定义的样式

<html>
  <head>
    <title>链接外部样式表的使用</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>链接外部样式表的使用</h1>
    <hr/ >
  </body>
</html>

2.3.2 导入外部样式表

导入外部样式表是指在页面的内部样式表中导入一个外部样式表。

@import 样式文件的引用地址;
@import url("样式文件的引用地址");

其中：

@import 关键字用于导入外部样式
url中的引用地址需要用引号（“ ”）引起来，否则会有浏览器不支持
在<style>标签中，@import语句需要位于内部样式之前

@import css/style.css;	
/*此种方式仅IE支持，Firefox与Opera不支持*/
@import url("css/style.css");	
/*此种方式IE、Firefox和Opera均支持，推荐使用*/

两种外部样式表的区别在于：

隶属关系不同：<link>标签属于HTML标签，而@import是CSS提供的载入方式
加载时间及顺序不同：使用<link>链接的CSS样式文件时，浏览器先将外部的CSS文件加载到网页当中，然后再进行编译显示（先CSS后HTML）；而@import导入CSS文件时，浏览器先将HTML结构呈现出来，再把外部的CSS文件加载到网页中，当网速较慢时会先显示没有CSS时的效果，加载完毕后再渲染页面（先HTML后CSS）
兼容性不同：由于@import是CSS 2.1提出的，只有在IE 5以上的版本才能识别，而<link>标签无此问题
DOM模型控制样式：使用JavaScript控制DOM改变样式时，只能使用标签，而@import不受DOM模型控制
综上所述，不管从显示效果还是网站性能上看，link链接方式更具有优势，应优先考虑

2.4 样式表的优先级

多重样式（Multiple Styles）是指外部样式、内部样式和内嵌样式同时应用于页面中的某一个元素。

在多重样式情况下，样式表的优先级采用就近原则。

一般情况下，多重样式的优先级由高到低的顺序是“内嵌->内部->外部->浏览器缺省默认”

3.CSS（层叠样式表）选择器

在这里插入图片描述

3.1 基本选择器

基本选择器是用来指明 “样式”将作用于网页中的哪些元素

分为以下四种：

通用选择器
标签选择器
类选择器
ID选择器

3.1.1 通用选择器

通用选择器（Universal Selector）是一个星号（*），功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。

*{ （声明） }

3.1.2 标签选择器

标签选择器是指任意的HTML标签名作为一个CSS的选择器，用于将HTML中的某种标签来统一设置样式。

//p是标签选择器，通过该选择器将页面中所有的段落字体统一设置成楷体。
p{ font-family:楷体; }

3.1.3 类选择器

类选择器是指同一样式的元素定义为一类，在类名前有一个点号（.）

.classname{ property1:value; … }

<div class="classname ">……</div>
<div class="classname ">……</div>
<div class="classname ">……</div>

3.1.4 ID选择器

ID选择器的定义与类选择器相似，区别在于使用井号（#）进行定义

在HTML文档中，元素的ID要求是唯一的，通过ID来识别页面中的元素。通过ID选择器可以对元素单独设置样式。

#idValue{ property1:value; … }

在一个文档中，由于ID属性是唯一的，因此ID选择器具有一定局限性，应尽量少用。

3.1.5 基本选择器的优先级

优先级从高到低分别是：
“ID选择器->类选择器->标签选择器->通用选择器”

3.2 组合选择器

除了基本的选择器外，CSS样式中还有组合选择器

包括以下5种：

多元素选择器
后代选择器
子元素选择器
相邻兄弟选择器
普通兄弟选择器

3.2.1 多元素选择器

当多个元素拥有相同的特征时，可以通过多元素选择器的方式来统一定义样式，有效地避免样式的重复定义。

多元素选择器允许一次定义多个选择器的样式，选择器之间使用逗号（，）隔开。

selector1, selector2 ,... {... }

//多元素选择器
p,div {font-size:14px; color:blue; }

和

//基本（标签）选择器
p {font-size:14px; color:blue; }
div {font-size:14px; color:blue; }

效果完全相同

3.2.2 后代选择器

后代选择器（Descendant Selector）又称包含选择器，用于选取某个元素的所有后代元素

后代元素之间用空格隔开

selector1  selector2   ... {... }

将<div>标签中的<p>标签的背景颜色设为#CCC，而不在<div>标签内的<p>标签保持原有样式。

div p {background-color:#CCC; }

3.2.3 子元素选择器

子元素选择器（Child Selectors）用于选取某个元素的直接子元素（间接子元素不适用）

子选择器元素之间使用大于号（>）隔开。

selector1 > selector2 > ... {... }

div > p {
	font-weight:bold;
	border: solid 2px #066;
}

注意：

CSS样式中提供了一种继承机制（inherit关键字），可以大量简化CSS代码，缩短开发的时间。
在HTML文档中，子元素可以继承父元素的某些样式；
当子元素与父元素定义的样式重复时，则会覆盖父元素中的样式。

3.2.4 相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在某元素之后的兄弟元素。

相邻兄弟选择器元素之间使用加号（+）隔开。

selector1 + selector2 + ... {... }

h3 + p { font-weight:bold; }

3.2.5 普通兄弟选择器

普通兄弟选择器（General Sibling Selector）是指拥有相同父元素的元素；

元素与元素之间不必直接紧随

选择器之间使用波浪号（~）隔开

selector1 ~ selector2 ... {... }

h3 ~ p {background:#ccc;}

3.3 属性选择器

属性选择器是根据元素的属性来选取元素。

属性选择器分为7种：

存在选择器
相等选择器
包含选择器
连接字符选择器
前缀选择器
子串选择器
后缀选择器

在这里插入图片描述

4.CSS（层叠样式表）样式属性

在选择器的定义中，声明由属性和属性值构成。

常用的CSS样式的属性有文本、字体、背景、表格、列表及定位等属性。

4.1 文本属性

在这里插入图片描述

<style type="text/css">
	.letterSpacingClass{ letter-spacing:5px; }
	.wordSpacingClass{ word-spacing:15px; }
	.textIndentClass{ text-indent:20px; }
	.textAlignClass{ text-align:justify; }
	.textTransform{ text-transform:uppercase; }
	.textDecoration{ text-decoration:underline; }
	.verticalAlign{ vertical-align:bottom; font-size:70%; }
</style>

在这里插入图片描述

4.2 字体属性

字体（又称字型）是字母和符号的样式集合。虽然字体之间可能会一定的差异，但总体特征基本相同。
在这里插入图片描述

<style type="text/css">
	.fontFamily{ font-family:楷体;}
	.fontStyle{ font-style:italic; }//斜体
	.textTransform{ text-transform:uppercase; }
	.fontVariant{ font-variant:small-caps; }//小型大写字母
	.fontWeight{ font-weight:bolder; }//特粗体
	.fontSize1{ font-size:xx-large; }//字体最大
	.fontSize2{ font-size:24px; }
	.myFont{ font:italic bold 12px/20px arial,sans-serif; }//字体属性简写
</style>

在这里插入图片描述

服务器字体

CSS3中的服务器字体功能，有效地避免了因客户端缺失字体所导致的页面效果变差的问题：

服务器字体可以控制浏览器使用服务器端所包含的字体；
当客户端没有安装该字体，系统会自动下载并安装，从而保证浏览者看到效果完全一致。

使用服务器字体，可按如下步骤进行：

下载所需的服务器字体，src引入；
通过 @font-face 来定义服务器字体；
通过 font-family属性引用服务器字体。

<style type="text/css">
//定义服务器字体
    @font-face{
    	//引用服务器字体
        font-family:QstFont;
        //下载好的服务器字体
        src:url("font/梦死醉生.ttf"),
            url('font/梦死醉生.eot');
    }
    p{
        font-family:QstFont;
    }
</style>

在这里插入图片描述
注意：

由于服务器字体需要从远程服务器下载字体文件，效率并不高。
在设计页面时，应优先使用浏览者的客户端字体。
Firefox、Chrome、Safari以及Opera浏览器支持.ttf（True Type Fonts）和.otf（OpenType Fonts）类型的字体。
在IE 8以及更早的版本中不支持@font-face规则。
IE 9+ 虽然支持新的@font-face规则，但目前仅支持.eot（Embedded OpenType）类型的字体。

4.3 背景属性

在CSS3中，新增了控制背景图片的显示位置、分布方式以及多背景图片等特征。

背景区域的填充（绘制）有border-box、padding-box和content-box三种形式。
在这里插入图片描述

多背景图像属性

CSS3中虽然提供了多背景图像，但在IE 7及更早版本的浏览器并不支持，而在IE 8中需要文档声明。

/*背景图像*/
background-image:url(images/bg12.jpg), url(images/bg13.jpg);
/*图像对应位置 */
background-position:left top, right bottom; 
/*图像平铺方式 */
background-repeat:repeat-x, repeat-y;

4.4 表格属性

表格是一种重要的数据组织形式，在数据显示时使用比较频繁。

通过表格属性对表格的边框、背景颜色和单元格间距等进行设置，使表格更加美观、富有特色，极大地改善表格的外观。
在这里插入图片描述
表格和单元格都有独立的边框，使得表格具有双线条边框，通过border-collapse属性设置表格是单边框（collapse）还是双边框（separate）。

4.5 列表属性

列表属性用于改变列表项的图形符号。

列表的图形符号不仅可以是圆点、空心圆、方块或数字，甚至还可以是指定的图片。
在这里插入图片描述
list-style-position属性指示如何相对于对象的内容绘制列表项标记，其属性值inside和outside区别如下：

inside表示图形符号位于文本之内，在文本换行时列表内容将与列表项的符号相对齐
outside表示图形符号位于文本之外，当文本内容换行时，无需参照标志的位置

<style>
	.listS li{
		list-style-position: outside;
		border:1px solid #ddd;
	}
	.listSs li{
    	list-style-position: inside;
    	border:1px solid #ddd;
	}
</style>

	<ul class="listS">
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>

	<ul class="listSs">
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>

在这里插入图片描述

4.6 分类属性

CSS中还有几个非常有用的属性，如：cursor、display、visibility、position、float和clear等属性。

4.6.1 cursor属性

cursor属性用于指定用户鼠标的指针类型。
在这里插入图片描述

4.6.2 display属性

通过display属性可以将页面元素隐藏或显示出来
通过display属性可以将元素强制改成块级元素或内联元素

display:none;不占用页面空间

<style>
	div{
		width: 200px;
		height: 200px;
		border: 1px solid #eee;
	}
</style>

	<div>12</div>
	<div style="display:none;">12</div>
	<div>12</div>

在这里插入图片描述

4.6.3 visibility属性

visibility属性可以将页面中的元素隐藏，但是被隐藏的元素仍占原来的空间
当不希望对象在隐藏时仍然占用页面空间时，可以使用display属性
visibility属性的取值范围为visible或hidden

	<div>12</div>
	<div style="visibility:hidden;">12</div>
	<div>12</div>

在这里插入图片描述

4.6.4 position属性

一般情况下，页面是由页面流构成的，页面元素在页面流中的位置是由该元素在(X)HTML文档中的位置决定的
块级元素从上向下排列（每个块元素单独成行），而内联元素将从左向右排列，元素在页面中的位置会随外层容器的改变而改变
在CSS中，提供了三种定位机制：普通流、定位（position）和浮动（float）

（1）当position的属性值为relative、absolute或fixed时，可以使用元素的偏移属性left、top、right和bottom进行重新定位
（2）当position属性为static时，会忽略left、top、right、bottom和z-index等相关属性的设置

z-index

当使用相对定位或绝对定位时，元素经常会出现元素相互重叠，此时可以使用z-index属性设置元素之间的叠放顺序。当元素取值为auto或数值（包括正负数）时，数值越大越往上层。
在页面坐标系中，不仅存在x、y方向，同时还存在z方向，如图4- 17所示。x轴正方向是从左向右，y轴正方向是从上往下，z轴与页面相互垂直、从内向外延伸；z坐标越大离用户更近，越小则离用户更远。

4.6.5 float和clear属性

float属性可以将元素从正常的页面流中浮动出来，离开其正常位置，浮动到指定的边界。
当元素浮动到边界时，其他元素将会在该元素的另外一侧进行环绕。
在页面中，浮动的元素可能会对后面的元素产生一定的影响
当希望消除因为浮动所产生的影响时，可以使用clear属性进行清除

下排文字没有使用clear属性的效果

下排文字使用clear:both;后的效果

5.伪类与伪元素

伪类和伪元素是预先定义的、独立于文档元素的，能够被浏览器自动识别
处于特殊状态的元素称为伪类，而 伪元素 是指元素中特别的内容（元素的一部分）
伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白
在CSS1时引入了 :link、 :visited和 :active三个伪类，只是用于HTML中的<a>标签，表示网页中的链接状态：未访问、已访问和被选中，三者之间是互斥的
在CSS2中对伪类的范围进一步扩充，确保适用于页面中的所有元素，并引入新的伪类 :hover、 :focus等

伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树（又称DOM模型）中不存在与之对应的部分。

总结

样式是CSS的基本单元，每个样式包含选择器和声明（属性：属性值）两部分
内嵌样式是将CSS样式嵌入到HTML标签中混合使用，可以对某个标签单独定义样式
内部样式表将CSS样式与HTML标签分离，使得HTML更加整洁
外部样式表是将样式表以单独的文件进行存放，然后将该文件引导网页中的方式
通常情况下，样式的优先级由高到低的顺序是“内嵌->内部->外部->浏览器缺省默认”
CSS基本选择器（4）包括通用选择器、标签选择器、类选择器、ID选择器
CSS组合选择器（5）包括多元素选择器、后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器
CSS属性选择器（7）可以根据元素的属性及属性值来选择元素，包括存在选择器、相等选择器、包含选择器、连字符选择器、前缀选择器、子串选择器、后缀选择器
常见的样式属性（6）包括文本属性、字体属性、背景属性、列表属性、表格属性和分类属性
伪类是指处于特殊状态的元素，而伪元素是指元素中特别的内容

今天也是爱大大的一天吖

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端复习-4、CSS语言基础

1.CSS（层叠样式表）概述在页面排版时，内容与样式的混合设计方式将导致页面代码过于臃肿、难于维护，也不利于搜索引擎的检索CSS（层叠样式表）的出现，将页面内容与样式彻底分离，极大改善了HTML在页面显示方面的缺陷使用CSS样式表可以控制HTML标签的显示样式，如页面的布局、字体、颜色、背景和图文混排等效果在网站的风格方面，一个CSS样式文件可以在多个页面中使用，当用户修改CSS样式文件时，所有引用该样式文件的页面外观都随之发生改变CSS基本语法结构样式是CSS的基本单元，每个样式包含两部.
复制链接

扫一扫