CSS
程序员文章站
2022-03-10 20:00:56
...
1.1 CSS概述
1.1.1 为什么要使用CSS
1.1.2 案例需求：
- 将一个表格中所有的单元格居中，如果使用以前的方式，每个td或tr都要设置align属性为center，而使用css则方便许多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
td{
text-align: center;
color: red;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<table border="1" align="center" width="400">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
</body>
</html>2.1.5 CSS美化的好处：
- 概念：Cascading Style Sheet 层叠样式表
- 作用：在网页制作时可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精准的控制。让HTML制作出来的网页更加漂亮，页面更容易维护。
| CSS好处 | 描述 |
| 功能上 | 比HTML美化更加强大，可以实现HTML中没有的功能 |
| 耦合性 |
降低代码的耦合度，分工更加明确。 HTML：主要用于网页结构的创建 css:用于网页的美化 |
2.1.6 CSS的编写规范:
| 规范 | 说明 |
| 大括号 | 所有的css代码放在{}中间 |
| 样式表 | 称为样式属性，在CSS规范已经制定好的 |
| 样式值 | 每个样式名都有固定的样式值，样式名与样式值之间使用冒号 |
| 样式结尾 | 以分号结尾 |
| 注释 | /*内容*/ |
<style type="text/css">
/*选择器，选中所有的td*/
td {
text-align: center;
color: blue;
}
h2 {
/*设置为红色*/
color: red;
}
</style>
2.2 CSS的位置
2.2.1 行内样式：
- 行内样式就是直接在HTML元素内部使用 style属性进行编写的。
- 缺点：
- 耦合度高。HTML代码和css代码混合在使用。
- 复用性极差。
<div style="color: red;font-size: 33px">这个是div</div>2.2.2 内部样式：
- 实现过程：在head标签内部添加style标签。然后编写css样式。
- 弊端：
- 复用性稍差，因为当前页面使用的css样式不能被其它页面所使用。
<style type="text/css">
div{
color: green;
font-size: 33px;
}
</style>
2.2.3 外部样式：
实现的过程:引入外部的css文件。
1.编写css文件
2.引入css文件
方式一：使用import语句引入
方式二：使用link标签引入（推荐使用）
2.3.1 选择器的作用：
- 在对html元素进行样式化之前，我们首先应该先找到该元素。css选择器的作用就是找到对应的元素。
2.3.2 语法格式：
选择器{
样式名：样式值；
}
2.3.3 基本选择器：
| 选择器分类 | 作用 | 语法 | 细节 |
| ID选择器 | 通过id属性值来选择元素 |
#id{ } |
前提：首先给元素指定一个id属性 唯一：建议同一个网页中id值应该唯一<a id="one">
|
| 类选择器 | 通过类名来选择元素 |
.类名{ } |
前提：对标签进行分类，使用class属性进行分类 命名：类名不能以数字开头<a class="one"> |
| 标签选择器 | 通过标签名选中元素 |
标签名{ } |
|
| 通用选择器 | 选中网页中的所有元素 |
*{ } |
2.3.4 基本选择器之间的优先级：
- ID选择器>类选择器>标签选择器>通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<STYLE type="text/css">
/*标签选择器*/
p{
color: aqua;
}
/*类选择器*/
.one{
color: red;
}
/*id选择器*/
#two{
color: blue;
}
/*通用选择器*/
*{
color: chartreuse;
}
</STYLE>
</head>
<body>
<p>
22222
</p>
<p id="two" class="one">
我爱java，沉迷java，无法自拔！
</p>
<!--首先使用class属性进行分类-->
<p class="one">
33333
</p>
<h2 class="one">我是标题</h2>
</body>
</html>2.4 扩展选择器
2.4.1 什么是扩展选择器：
- 由基本选择器组合而成，可以有更加灵活的选择方式。
2.4. 2 常用的扩展选择器：
| 扩展选择器 | 格式 | 作用 | 语法符号 |
| 层级选择器 | 父选择器 子选择器{} | 选择某个元素下面所有的子元素和孙元素 | 空格 |
| 属性选择器 |
标签名【属性名】 |
选择某个标签，具有某个指定的属性名 | 【】 |
| 标签名【属性名=“属性值”】 | 选择某个标签，属性名等于属性值的元素 | ||
| 伪类选择器 |
链接：a
|
在某个元素操作过程中，针对不同的状态下的元素进行样式化 注意：
|
|
|
文本框： 文本框：focus |
文本框得到焦点以后样式，文本框中如果得到光标。 | ||
| 并集选择器 | 选择器1，选择器2 | 选中的元素是两个或多个选择器的和 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*层级选择器：找到div下面的p标签*/
div p{
color: chartreuse;
}
/*属性选择器 找到input标签，而且input标签必须包含type属性，type的属性值必须为text*/
input[type="text"]{
color: red;
}
input[type="button"]{
color: aqua;
}
/*伪类选择器：针对元素处于不同的状态进行样式化*/
/*没有被访问过*/
a:link{
color: blue;
}
/*被访问过*/
a:visited{
color: red;
}
/*鼠标经过*/
a:hover{
color: aquamarine;
font-size: 22px;
}
/***状态*/
a:active{
color: green;
}
/*获取焦点*/
input[type="text"]:focus{
color: antiquewhite;
font-size: 33px;
}
/*并集选择器 选择了h3和p标签*/
h3,p{
color: gold;
}
</style>
</head>
<body>
<body>
<h3>扩展选择器</h3>
<div>
<h2>
<p>我是段落</p>
</h2>
</div>
<p>我是第二段</p>
文本框：
<input type="text" value="陈奕迅" class="user"/><br/>
<input type="button" value="王菲"/>
<hr/>
<a href="#1">点我试试</a><br/>
<a href="#2">点我试试</a><br/>
<a href="#3">点我试试</a><br/>
<a href="#4">点我试试</a><br/>
</body>
</body>
</html>- **状态：
- 获取焦点前：
/*获取焦点*/
input[type="text"]:focus{
color: antiquewhite;
font-size: 33px;
}
- 获取焦点后：（鼠标放在文本框中一闪一闪...）
上一篇： Python文件处理