CSS（基础篇）

程序员文章站 2022-03-10 20:00:26

...

1. CSS概念及编写规范

概念：层叠样式表
作用：在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
优势
- 功能上：可以完成HTML不能完成的美化工作；
- 耦合性：降低了代码的耦合度，将结构与美化分离（HTML：负责网页的结构，CSS:负责网页的美化）
编写规范
- CSS写在大括号内部
- 格式为：样式名:样式值;
- 注释：/* */

2. CSS的使用位置

2.1 行内样式

在html元素内部直接使用style属性进行编写。只对该标签起作用

格式，如：

<div style="样式名1:样式值1;样式名2:样式值2;...">xxx</div>

缺点：
1. 耦合度高，html代码和css代码混合使用；
2. 复用性极差。

2.2 内部样式

在head标签内部添加style标签，在内部编写css样式

格式，如：

<style type="text/css">
    div{
        color:blue;
        font-size:20px;
    }
</style>

缺点：复用性不足，当前css样式不能被其他页面使用

2.3 外部样式

引入外部的css文件
步骤：1、编写css文件；2、引入css文件

css引入方法有两种

方式一：使用import语句。url里写css文件地址

<style type= "text/css">
    @import url("demo.css");
</style>

方式二：使用link标签

<link href="demo.css" type="text/css" rel="stylesheet"/>
<!--rel：指定引入文件与当前文件的关系，stylesheet表示引入文件是样式的脚本代码

推荐使用link引入

3. 基本选择器

对html元素样式化前，先要找到该元素，此时需要用到css选择器
基本格式：
```
选择器{
	样式名：样式值；
}
```

3.1 基本选择器类型

3.1.1 标签选择器

通过标签名选中元素
语法：
```
  标签名{
  }
```
特点：html元素中所有相同标签名的元素都会被选中

3.1.2 类选择器

通过类名选中元素
前提：对标签进行分类，使用class属性进行分类
命名：类名不能以数字开头
语法：
```
  .类名{
  }
```
特点：html元素中所有指定class属性的元素都会被选中

3.1.3 ID选择器

通过ID属性值选中元素
前提：给元素指定一个id属性
唯一：同一个网页中的id值应该要唯一
语法：
```
  #标签名{
  }
```
特点：html元素中指定id属性的元素都会被选中

3.1.4 通用选择器

网页中所有的元素都被选中
语法：
```
  *{
  }
```
特点：html元素中所有相同标签名的元素都会被选中

3.2基本选择器的优先级

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

越靠前优先级越高，相同元素会根据高优先级的选择器执行

3.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style type="text/css">
        /*标签选择器*/
        h3 {
            color: red;
        }

        /*类选择器*/
        .demo {
            color: green;
        }

        /*id选择器*/
        #one {
            color: deepskyblue;
            font-size: large;
        }

        /*通用选择器*/
        * {
            color: orange;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h3>选择题</h3>

<p class="demo">IE</p>
<div class="demo" id="one">safari</div>
<span>chrome</span>

</body>
</html>

4. 扩展选择器

由基本选择器组合，更加灵活

4.1 层级选择器

选择某个元素下所有的子元素和孙元素
格式：
```
父选择器 子孙选择器{
}
```

4.2 属性选择器

选择具有某个指定属性名的所有标签/选择具有某个指定属性名=属性值的所有标签

格式：

标签名[属性名] {}
<!--或者-->
标签名[属性名="属性值"]{}

4.3 伪类选择器

在某个元素操作过程中，针对不同的状态下的元素进行样式化
可分为锚伪类，first-child伪类，lang伪类等

以锚伪类为例，其中，连接的不同状态可以用不同的方式显示，包括活动状态，已被访问状态，未被访问状态，和鼠标悬停状态

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

注意：

在 CSS 定义中，标签名:active 必须被置于 标签名:hover 之后，才是有效的；标签名:hover 必须被置于 标签名:link 和 标签名:visited 之后，才是有效的。

4.4 并集选择器

选中的元素时两个或者多个选择器之和
格式：
```
选择器1,选择器2{}
```

4.5 补充知识点：文本框获得焦点

可以对文本框获得焦点的状态样式化
格式：文本框：focus{}
```
input[type="text"]:focus{
}
```

4.6 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        /*拓展选择器*/
        /*层级选择器: 找到div下面的p标签*/
        div p{
            color:blue;
        }
        
        /*属性选择器   找到input标签，而且input标签必须包含type属性，type的属性值必须为text*/
        input[type="text"]{
            color: red;
        }
        
        /*  伪类选择器： 针对元素处于不同的状态进行样式化*/
        /*没有被访问过*/
        a:link{
            color: brown;
        }
        /*被访问过*/
        a:visited{
            color: purple;
        }
        /*鼠标经过*/
        a:hover{
            color: green;
            font-size: 20px;
        }
        /***状态*/
        a:active{
            color: yellow;
        }
        /*获取焦点*/
        input[type="text"]:focus{
            font-size: 20px;
        }

        /*并集选择器*/
        h3,p{
            color: orange;
        }
    </style>
</head>
<body>

<h3>扩展选择器1</h3>

<div>
    <h2>
        <p>扩展选择器2</p>
    </h2>
</div>

<p>扩展选择器3</p>

文本框：
<input type="text" value="user" class="user"/><br/>
<input type="button" value="submit"/>

<hr/>
<a href="#1">buttom</a><br/>
<a href="#2">buttom</a><br/>
<a href="#3">buttom</a><br/>

</body>
</html>

5. 常见CSS样式

5.1 背景样式

可使用标签选择器对body的背景进行样式化

功能	属性名	属性取值
背景色	background-color	颜色常量，如：red 使用十六进制，如：#123
背景图片	background-image	格式：url(图片文件)
平铺方式	background-repeat	repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。
背景位置	background-position	左边和顶部的坐标
背景大小	background-size	宽度和高度

5.2 文本样本

功能	属性名	属性取值
颜色	color	颜色常量，如：red 使用十六进制，如：#123
设置行高	line-height	单位是像素
文字修饰	text-decoration	underline 下划线 overline 上划线 line-through 删除线
文本缩进	text-indent	用于缩进文本，可以使用em单位，表示缩进2个字符，无论字符的大小。
文本对齐	text-align	left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。

5.3 字体样式

功能	属性名	作用
字体名	font-family	设置字体，本机必须要有这种字体
设置大小	font-size	单位：像素
设置样式	font-style	字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。
设置粗细	font-weight	bolder加粗

5.1~5.3 示例代码

需求：对一段文字进行样式化：

1. 诗放在div的层中，宽400px。标题放在h1中。每段文字放在p中
2. body全文字体大小14px; 颜色：#333
3. 标题文字大小18px，颜色#06F，居中对齐
4. 每段文字缩进2em（em是一个相对度量单位，相当于缩进2个字）
5. 段中的行高是22px
6. "胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色
7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。
8. 美字加粗，颜色color:#F36，大小18px;
9. 文席慕容，三个字，12px，颜色#999，不加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body {
            /*设置背景颜色*/
            background-color: orange;
            /*设置背景图片*/
            background-image: url(img/1514278184.jpg);
            /*设置背景图片的平铺方式*/
            background-repeat: repeat;
            /*设置背景图的位置*/
            background-position: 20px 20px;
            /*设置背景大小*/
            /*background-size: 150%;*//*如果用%，只需要设置一个值，如果设置两个会显示有问题*/
            background-size: 200px 300px;

            /*设置文字大小和颜色*/
            font-size: 14px;
            color: #333;
        }

        div {
            width: 400px;
        }

        h1 {
            /*设置标题字体大小、颜色和文本对齐方式*/
            font-size: 18px;
            color: #06F;
            text-align: center;
        }

        p {
            /*设置文字缩进*/
            text-indent: 2em;
            /*设置行高*/
            line-height: 22px;
        }

        /*美字加粗，颜色color:#F36，大小18px;*/
        #mei {
            font-weight: bolder;
            color: #F36;
            font-size: 18px;
        }

        /*"胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
        #two {
            font-weight: bold;
            font-style: italic;
            color: blue;
        }

        /*最后一段，颜色#390; 下划线，鼠标移上去指针变化*/
        .last{
            color: #390;
            text-decoration: underline;
            /*鼠标移上去指针变化*/
            cursor: pointer;
        }

        /*文席慕容，12px，颜色#999，不加粗*/
        /*使用层级选择器进一步筛选*/
        h1 span{
            font-size: 12px;
            color: #999;
            font-style: normal;
        }

    </style>
</head>
<body>
<div>
    <h1> 初相遇 <span>文/席慕容</span></h1>
    <p><span id="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时
        刻里出现。</p>
    <p> 我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的
        时光竟然都能重回时的狂喜与感激。
        <span id="two">胸怀中满溢着幸福，只因你就在我眼前，</span>对我微笑，一如当年。
    </p>
    <p class="last">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初
        相遇。
    </p>
</div>
</body>
</html>

5.4 盒子模型

5.4.1 概念

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)，可称为盒子模型。

5.4.2 属性

CSS（基础篇）

width：宽度
height：高度
margin：外边距
padding：内边距
border：边框，三个值（粗细、线型、颜色）

5.4.3 盒子模型分类

分为标准盒模型、怪异盒模型

5.4.3.1 标准盒模型content-box

box-sizing属性值为content-box，宽和高会被内边距、边框的尺寸撑大（随盒子的内容增加而变宽）

CSS（基础篇）

则实际高宽为：

**实际宽度 = width+ border(左、右) + padding(左、右) **

实际高度 = height+ border(上、下) + padding(上、下)

5.4.3.2 怪异盒模型border-box

box-sizing属性值为border-box，宽和高是设置的值，内容的尺寸会被压缩（盒子尺寸固定，不跟随内容变化）

CSS（基础篇）

则实际高宽为：

实际宽度 = width

实际高度 = height

5.4.4 边框属性

属性	边框样式	取值
border-style	边框线型	dotted：定义点状边框。在大多数浏览器中呈现为实线。 dashed：定义虚线。在大多数浏览器中呈现为实线。 solid：定义实线。 double：定义双线。双线的宽度等于 border-width 的值。
border-width	边框宽度	length：允许您自定义边框的宽度。
border-color	边框颜色	常量：规定颜色值为颜色名称的边框颜色（比如 red）。十六进制：十六进制值的边框颜色（比如 #ff0000）。
border-radius	边框圆角	指定圆角的半径

5.4.4.1 边框属性写法

外边距写法

外边距的写法	含义
margin-top:10px;	上外边距
margin-left:10px;	左外边距
margin-bottom: 10px;	下外边距
margin-right:10px;	右外边距

内边距写法

内边距的写法	含义
padding-top:10px;	上内边距
padding-left:10px;	左内边距
padding-bottom: 10px;	下内边距
padding-right:10px;	右内边距

块级模块的居中

margin: auto;

5.4.5 display属性

作用：控制元素的显示和隐藏

取值	作用
inline	设置元素为内联元素
block	设置元素为块级元素
none	设置元素不可见

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        div {
            background-color: aqua;
            /*修改成内联元素*/
            display: inline;
        }
        span {
            background-color: violet;
            /*修改成块级元素*/
            display: block;
        }
        h2 {
            /*元素隐藏*/
            display: none;
        }
    </style>
</head>
<body>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<h2>隐藏元素</h2>
</body>
</html>

CSS（基础篇）

1. CSS概念及编写规范

2. CSS的使用位置

2.1 行内样式

2.2 内部样式

2.3 外部样式

3. 基本选择器

3.1 基本选择器类型

3.1.1 标签选择器

3.1.2 类选择器

3.1.3 ID选择器

3.1.4 通用选择器

3.2基本选择器的优先级

3.3 示例代码

4. 扩展选择器

4.1 层级选择器

4.2 属性选择器

4.3 伪类选择器

4.4 并集选择器

4.5 补充知识点：文本框获得焦点

4.6 示例代码

5. 常见CSS样式

5.1 背景样式

5.2 文本样本

5.3 字体样式

5.1~5.3 示例代码

5.4 盒子模型

5.4.1 概念

5.4.2 属性

5.4.3 盒子模型分类

5.4.3.1 标准盒模型content-box

5.4.3.2 怪异盒模型border-box

5.4.4 边框属性

5.4.4.1 边框属性写法

5.4.5 display属性

JAVA常用基础API(经典实例代码)

Python基础语法之while循环

js课程设计做什么（javascript程序设计基础教程）

软件编程入门自学教程（零基础编程软件）

网站服务器配置单（科普服务器搭建基础知识）

html文件用什么打开文件（零基础入门HTML）

css横向滚动条样式（网页横向滚动条设置）

android开发基础知识点（有关android入门知识解析）

ASP.NET Core MVC/WebApi基础系列1

dw使用基础教程（dw编写完代码运行方法）