文章目录
- 前言
- 一、CSS是什么？
- 二、使用方式
-
- [1. 基本语法](#1. 基本语法)
- [2. 引入方式](#2. 引入方式)
- [3. 选择器](#3. 选择器)
-
- [1. 标签选择器](#1. 标签选择器)
- 2.类选择器
- [3. id选择器](#3. id选择器)
- [4. 通配符选择器](#4. 通配符选择器)
- [4. css属性](#4. css属性)
-
- [1. 文本样式属性](#1. 文本样式属性)
- [2. 文本外观属性](#2. 文本外观属性)
- [5. 元素类型及其转换](#5. 元素类型及其转换)
-
- [1. 元素的类型](#1. 元素的类型)
- [2. 元素的转换](#2. 元素的转换)
- 6.css高级特性
-
- [1. 复合选择器](#1. 复合选择器)
- [2. css层叠性和继承性](#2. css层叠性和继承性)
-
- [1. 层叠性](#1. 层叠性)
- [2. 继承性](#2. 继承性)
- [3. css优先级](#3. css优先级)
- 总结
前言
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!
一、CSS是什么？
CSS（层叠样式表）是一种用于描述网页上元素的样式和布局 的语言。它与HTML结合使用，可以通过选择器来选择元素，并通过属性来定义元素的外观和行为。CSS可以控制文字的颜色、大小和字体样式，以及元素的大小、位置和背景等。通过使用CSS，可以使网页更具吸引力、易读性和可访问性。
二、使用方式
1. 基本语法
选择器 { 属性1: 值1; 属性2: 值2; ... }
2. 引入方式
1.行内式
行内式也称为内联样式，是通过标记的stvle属性来设置元素的样式。
html
<标记名style="属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 内容 </标记名>2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用**
html
<head>
<style type="text/css">
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>
css
div{
color: red;
font-size: 20px;
}3. 链入式
链入式是将所有的样式放在一介或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。
html
<head>
<link href="Css文件的路径"type="text/css"rel="stylesheet"/>
</head>3. 选择器
1. 标签选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 3.链入式 -- 开发的时候一般都会使用这种方式-->
<link rel="stylesheet" href="./style.css">
<!-- 2.内嵌式 -->
<style>
div{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 1.引入css样式 - 行内式,不推荐,写标签的地方建议只写标签 -->
<div style="color: red;font-size: 20px;">123</div>
<div>123</div>
</body>
</html>上述案例中style标签中的div就属于标签选择器
2.类选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 类选择器 -->
<style>
/*
选择class属性值为box的标签 -- 可以有多个标签有相同的class属性值
每个class标签可以有多个名字
*/
.box{
color: red;
font-size: 20px;
}
.box1{
width: 100px;
height: 100px;
font-size: 50px;
background-color: aliceblue;
}
.box2{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box box1">123</div>
<div class="box box2">123</div>
<p class="box">这是p标签</p>
</body>
</html>3. id选择器
id选择器使用"#"进行标识，后面紧跟id名，其基本语法格式如下：
html
/* id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；} */
<style>
#box{
width: 100px;
height: 100px;
background-color:aquamarine;
}
</style>4. 通配符选择器
html
<style>
*{
color: red;
font-size: 10px;
/* 清除样式 */
list-style: none;
}
</style>4. css属性
1. 文本样式属性
学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本样式属性。
为了更方便的控制网页中各种各样的字体,css提供了一系列的字体样式属性
-
font-size属性用于设置字号。
-
常用单位
- 像素（px）：像素是最常用的单位，它表示屏幕上的一个物理像素。例如，font-size: 16px; 表示文本的大小为16像素。
- 百分比（%）：百分比单位相对于父元素的尺寸来计算。例如，font-size: 120%; 表示文本的大小为父元素字体大小的120%。
- em（em）：em单位相对于当前元素的字体大小来计算。例如，font-size: 2em; 表示文本的大小为当前元素字体大小的两倍。
- rem（rem）：rem单位相对于根元素（通常是元素）的字体大小来计算。例如，font-size: 1.5rem; 表示文本的大小为根元素字体大小的1.5倍。
- vw（视口宽度单位）：vw单位是相对于视口宽度的百分比单位。例如，font-size: 5vw; 表示文本的大小为视口宽度的5%。
- vh（视口高度单位）：vh单位是相对于视口高度的百分比单位。例如，font-size: 10vh; 表示文本的大小为视口高度的10%。
- rem和em的区别：rem单位相对于根元素的字体大小计算，而em单位相对于当前元素的字体大小计算。rem单位可以更好地控制整个页面的大小，而em单位相对于父元素的尺寸来计算，可以用于更细粒度地控制元素的大小。
-
-
font-family属性用于设置字体。
- 常用字体
- Arial：这是一种无衬线字体，广泛用于Web设计中。
- Helvetica：也是一种无衬线字体，非常相似于Arial。
- Times New Roman：这是一种衬线字体，很常见于印刷和出版物中
- Georgia：也是一种衬线字体，适合用于阅读大段文字。
- Verdana：这是一种宽松的无衬线字体，适合在小尺寸和低分辨率屏幕上使用。
- Tahoma：这也是一种无衬线字体，比较紧凑，适合用于小尺寸和高分辨率屏幕。
- 常用字体
-
font-weight属性用于定义字体的粗细。
- 常用属性
- normal：默认值，表示使用正常的字体粗细。
- bold：表示使用粗体字体。
- bolder：更加粗体的字体，相对于父元素的字体粗细而言。
- lighter：更加细的字体，相对于父元素的字体粗细而言。
- 数字值（100、200、...、900）：表示使用特定的字体粗细，数字越大表示字体越粗。常用的数字值有100（thin）、400（normal）、700（bold）。
- initial：表示使用默认的字体粗细。
- inherit：表示继承父元素的字体粗细。
- 常用属性
-
font-variant属性用于设置变体（字体变化）。
-
属性值
- normal：默认值，不改变字体的大小写形式。
- small-caps：将所有小写字母转换为小型大写字母，同时保持大写字母不变。
-
-
font-style属性用于定义字体风格
-
属性
- normal：默认值，标准的字体样式。
- italic：斜体字体样式。
- oblique：倾斜字体样式。
-
-
font属性用于对字体样式进行综合设置。
-
在CSS的font属性中，参数的顺序是有特定的规定的。它们的顺序应该按照以下顺序排列：
- font-style（字体样式）
- font-variant（字体变体）
- font-weight（字体粗细）
- font-size（字体大小）
- line-height（行高）
- font-family（字体系列）
-
2. 文本外观属性
-
color：设置文本颜色。
-
font-family：设置文本的字体系列。
-
font-size：设置文本的字体大小。
-
font-weight：设置文本的字体粗细。
-
font-style：设置文本的字体样式，比如斜体。
-
text-align：设置文本的对齐方式，比如左对齐(left)、居中对齐(center)、右对齐(right)等。
-
text-decoration：设置文本的装饰效果，比如下划线(underline)、上划线(overline)、删除线(line_through)等。
-
text-transform：设置文本的大小写转换，比如大写、小写、首字母大写等。
- none：不进行大小写转换，保持原样。
- capitalize：将每个单词的首字母转换为大写。
- uppercase：将文本中的所有字母转换为大写。
- lowercase：将文本中的所有字母转换为小写。
- initial：将属性重置为默认值。
- inherit：从父元素继承属性值。
-
letter-spacing：设置字符间的间距。
-
line-height：设置行高，控制行与行之间的距离。
-
white-space：设置文本的处理方式，比如处理空格、换行等。
-
text-indent 用于设置首行文本的缩进,其属性值可为不同的数值,em字符宽度的倍数,或相对于浏览器窗口的百分比,允许使用负值,建议使用em设置单位
-
background-color:背景颜色,可以使用rgb(30,0,0),十六制颜色(#ccc),英文单词(red)
5. 元素类型及其转换
1. 元素的类型
HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。
-
块元素
- 在页面中以区域块的形式出现。
- 每个块元素通常都会独自占据---整行或多整行。
- 可以对其设置宽度、高度、对齐等属性。
- 常见的块元素:h1-h6,div,p,li,ol,ul
-
行内元素
- 不占有独立的区域。
- 仅仅靠自身的字体大小和图像尺寸来支撑结构。
- 一般不可以设置宽度、高度、对齐等属性。
- 常见的行内元素:strong,b,a,em,u(下划线),span
-
行内块元素
- 不会独占一行
- 能够调整宽高
- 本身高度默认是由内容撑开的
行内块元素的使用场景包括创建按钮、图像展示、菜单栏等。通过使用行内块元素可以实现一些复合性的布局效果，并且可以在不破坏文本流的情况下控制元素的尺寸和外观。
2. 元素的转换
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: antiquewhite;
/* 转换成行内块元素 */
/* 注意行内元素inline和行内块元素inline-block */
display: inline-block;
}
</style>
</head>
<body>
<div>box1</div>
<div>box2</div>
<span>这是span标签</span>
</body>
</html>6.css高级特性
1. 复合选择器
- 标签指定选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 交集选择器 :单独选中class属性为box1的div标签*/
div.box1{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!-- 交集选择器示例 -->
<div class="box1">div标签</div>
<li>
<p class="box2">p标签</p>
</li>
<span>span标签</span>
<div>这也是一个div标签</div>
</body>
</html>- 后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 -- 所有代*/
ul li{
font-size: 50px;
}
/* 子选择器 -- 只有第一代 */
ul>li{
font-size: 50px;
}
</style>
</head>
<body>
<!-- 后代选择器示例 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<span>
<li>4</li>
</span>
</ul>
<ol>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</body>
</html>- 并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 同时选择到p和div标签 -- 并集选择器 */
div,p{
width: 200px;
height: 200px;
background-color: yellow;
}
.box1,.box2{
width: 100px;
height: 100px;
background-color:yellowgreen;
}
</style>
</head>
<body>
<!-- 并集选择器示例 -->
<div class="box1">div标签</div>
<li>
<p class="box2">p标签</p>
</li>
<span>span标签</span>
</body>
</html>2. css层叠性和继承性
1. 层叠性
所谓层叠性是指多种CSS样式的叠加。
2. 继承性
所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。
并不是所有的CSS属性都可以继承，例如。下面的属性就不具有继承性：边框属性,定位属性,内外边距属性,布局属性,背景属性,元素宽高属性
3. css优先级
思考? 网页制作时，对统一元素，应用不同的背景，会出现什么情况？
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
html
<p class="father" id="header">
<strong class="blue">文本的颜色</strong>
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个important命令 ，该命令被赋予最大的优先级。
总结
本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!