免费公司网站建设/品牌广告文案
CSS技术
- CSS技术介绍
- 语法规则
- CSS 和 HTML 的结合方式
- 方式一
- 方式二
- 方式三
- CSS选择器
- 标签名选择器
- id选择器
- class 选择器（类选择器）
- 组合选择器
- 常用样式
- 1.字体颜色
- 2.宽度
- 3.高度
- 4.背景颜色
- 5.字体样式
- 6.红色1像素实线边框
- 7.DIV居中
- 8.文本居中
- 9.超链接去下划线
- 10.表格细线
- 列表去除修饰
- 代码整合
CSS技术介绍
CSS是【层叠样式表单】。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法规则
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。
属性（property）：要更改的样式名，每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这就组成了一个完整的样式声明（declaration）。
多个声明：如果要定义多个声明，就需要用分号将每个声明分开。最后一条声明的最后可以不加分号（尽量在每条声明的末尾都加上分号）
CSS注释：/*注释内容*/
CSS 和 HTML 的结合方式
Css注释： /* 注释 */
方式一
在标签的style属性上设置“key：value value;”，修改标签样式。
<body>
<!--需求 ：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 --><div style="border: 1px solid red">div 标签 1</div><div style="border: 1px solid red">div 标签 2</div><span style="border: 1px solid red">span 标签 1</span><span style="border: 1px solid red">span 标签 2</span>
</body>
方式二
在head标签中，使用style标签来定义各种自己需要的css样式。
格式：
{
Key : value value;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--style标签专门用来定义css样式代码--><style type="text/css">/*需求：分别定义两个 div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。**/div{border:1px solid red;}span{border:1px solid red;}</style>
</head>
<body><div>div 标签 1</div><div>div 标签 2</div><span>span 标签 1</span><span>span 标签 2</span>
</body>
</html>
方式三
把css样式写成一个单独的css文件，再通过link标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css"/> 标签 导入 css 样式文件。
1_css.css 文件内容：
div{border: 1px solid yellow;}span{border: 1px solid green;}
html 文件代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--link标签专门用来引入css样式代码--><link rel="stylesheet" type="text/css" href="1_css.css"/>
</head>
<body><div>div 标签 1</div><div>div 标签 2</div><span>span 标签 1</span><span>span 标签 2</span>
</body>
</html>
CSS选择器
标签名选择器
标签名选择器的格式是：
标签名{
属性 ： 值;
}
标签名选择器可以决定哪些标签被动的使用这个样式。
color 属性：设置字体颜色
font-size 属性：设置字体大小
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">div{border: 1px solid yellow;color:blue;font-size: 30px;}span{border: 5px dashed blue;color:yellow;font-size: 20px;}</style>
</head>
<body><!-- 需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span></body>
</html>
id选择器
id选择器的格式是：
#id 属性值{
属性 : 值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ID选择器</title><style type="text/css">#id001{color: blue;font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 20px;border: 5px blue dotted;}</style>
</head>
<body> <!-- 需求1：分别定义两个 div 标签，第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。--><div id="id001">div标签1</div><div id="id002">div标签2</div></body>
</html>
class 选择器（类选择器）
class 类型选择器的格式是：
.class 属性值{
属性 : 值;
}
class 类型选择器，可以通过 class 属性有效的选择性的去使用这个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">.class01{color: blue;font-size: 30px;border: 1px yellow solid;}.class02{color: grey;font-size: 26;border: 1px red solid;}</style>
</head>
<body><!-- 需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。--><div class="class01">div标签class01</div><div class="class02">div标签</div><span class="class01">span标签class01</span><span >span标签2</span></body>
</html>
组合选择器
组合选择器的格式：
选择器 1，选择器 2， 选择器 n{
属性 : 值：
}
组合选择器可以让多个选择器共用一个css样式代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title><style type="text/css">.class01 ,#id01{color: blue;font-size: 20px;border: 1px yellow solid;}</style>
</head>
<body><!-- 需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。--><div class="class01">div标签class01</div> <br /><span id="id01">span 标签</span> <br /><div>div标签</div> <br /><div>div标签id01</div> <br /></body>
</html>
常用样式
1.字体颜色
color:red;
颜色可以写颜色名如：black，blue，red，green等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，如果写十六进制必须加#
2.宽度
width:19px;
宽度可以写像素值：19px;
也可以写百分比值：20%;
3.高度
height:20px;
高度可以写像素值：19px;
也可以写百分比值：20%;
4.背景颜色
background-color:#0F2D4C;
5.字体样式
color：#FF0000；/*字体颜色红色*/
font-size：20px; /*字体大小*/
6.红色1像素实线边框
border：1pxsolidred;
7.DIV居中
auto：自动
margin-left: auto;
margin-right: auto;
8.文本居中
text-align: center;
9.超链接去下划线
<head><meta charset="UTF-8"><title>06-css常用样式.html</title><style type="text/css">a{text-decoration: none;}</style>
</head>
<body><a href="http://localhost:8080">我是超链接</a><br/>
</body>
10.表格细线
<head><meta charset="UTF-8"><title>06-css常用样式.html</title><style type="text/css">table{border: 1px solid black;/*设置边框*/border-collapse;/*将边框合并*/}</style>
</head>
<body><table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table>
</body>
列表去除修饰
<head><meta charset="UTF-8"><title>06-css常用样式.html</title><style type="text/css">ul{list-style: none;}</style>
</head>
<body>
代码整合
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>06-css常用样式.html</title><style type="text/css">div{color: rgb(200,0,0);width:200px;height: 200px;border: blue 1px solid;background-color:#0F2D4C;margin-left: auto;margin-right: auto;text-align: center;}a{text-decoration: none;}table{border: 1px solid black;/*设置边框*/border-collapse;/*将边框合并*/}ul{list-style: none;}</style>
</head>
<body><div>我是div标签</div><br/><a href="http://localhost:8080">我是超链接</a><br/><ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li></ul><table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table>
</body>
</html>