前端-CSS
使用CSS将HTML页面的内容与样式分离提高web开发的工作效率
CSS可以让 html元素(内容)＋样式(CSS)分离，更好的控制页面
CSS语法
- CSS语法可以分为两部分:(1)选择器(2)声明
- 声明由属性和值组成，多个声明之间用分号分隔
- 一般每行只描述一个属性
- CSS注释:
/*注释内容*/
选择器{
声明1;
声明2;
声明3;
......
}
字体颜色
有三种方式，指定颜色
- 英文
- 16进制#于f7d44[使用最多]
- 三原色rgb(1,1,1)
- color: red;
字体边框
- width: 300px 宽度 具体的像素
- width: 50% 宽度 是百分比
- height: 100px; 高度 具体的像素
- border: 1px solid red; 边框实线
- border: 1px dashed red; 边框虚线
背景颜色
- background-color: red;
字体样式
- font-size:指定大小，可以按照像素大小
- font-weight :指定是否是粗体
- font-family :指定字体类型
div{
font-size: 100px;
font-weight: bold;
font-family: 黑体;
}
DIV居中
- margin-left、margin-right 如果设置为auto，表示左右居中
div{
margin-left: auto;
margin-right: auto;
}
文本居中
- text-align: center;
超链接去下划线
a{
text-decoration: none;
}
表格细线
- 设置边框：border: 1px solid black
- 将边框合并：border-collapse : collapse;
- 指定宽度：width
- 设置边框:给td, th指定即可 border：1px solid black
1. table, tr, td, th表示组合选择器
2．就是table、tr、td和th,都用统一的格式指定,可以提高复用性
3. 如果只指定其中一个的话,那么只有该属性线条
table,tr,td,th{
border: 1px solid red;
border-collapse: collapse;
}
列表去修饰
ul{
/*说明:list-style : none表示去掉默认的修饰*/
list-style: none;
}
css使用的三种方式
-
方式1︰在标签的style属性上设置css样式
-
方式2:在head标签中，使用style标签来定义需要的CSS样式
-
方式3∶把css样式写成单独的css文件，再通过link标签引入
css元素选择器
1.最常见的 CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
2.css元素/标签选择器通常是某个HTML元素，比如 p、h1、a等
<style type="text/css">
/*
说明:元素选择器会修饰所有的对应的元素
*/
div{
height: 50px;
width: 100px;
background-color: red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div>hello world</div>
<p>你好，世界</p>
id选择器
- id选择器可以为标有特定id 的HTML元素指定特定的样式。
- id选择器以"#”来定义。
1．使用id选择器，需要先在要修饰元素指定id属性，id值是程序员自己指定
2. id是唯一的，不能重复
3．在<style>标签中指定id选择器时，前面需要有#id值
#t1{
color: red;
}
#t2{
color: darkgrey;
}
<h1 id="t1">hello world</h1>
<p id="t2">你好，世界</p>
class选择器
- class类选择器，可以通过class属性选择去使用这个样式
- 基本语法.class 属性值{属性：值;}
1.使用class选择器，需要在被修饰的元素上，设置class属性，属性值程序员指定
2. class属性的值，可以重复
3.需要在指定类选择器的具体样式，前面需要是 .类选择器名称
.css1{
color: red;
}
.css2{
color: blue;
}
<div class="css1">hello world</div>
<div class="css1">TEST</div>
<h1 class="css2">你好,世界</h1>
<span class="css2">大家好</span>
组合选择器
- 组合选择器可以让多个选择器共用同一个css样式代码
- 语法格式 选择器1，选择器2，选择器n{ 属性: 值;}
.css1, #id01{
width: 100px;
height: 100px;
border: 5px solid red;
}
<div class="css1">hello world</div>
<h1 id="id01">你好,世界</h1>
选择器优先级
- 行内样式 > id选择器 > class选择器 > 元素选择器
CSS的作用
1.在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式，费心费力。所以CSS就出现了。
2使用CSS将HTML页面的内容与样式分离提高web开发的工作效率
3.CSS可以让 html元素(内容)＋样式(CSS)分离，更好的控制页面
CSS基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<!--
1.在head标签内，出现了<style type="text/css"></style>
2．表示要写css内容
3. div表示对div元素进行样式的指定
4. width: 300px;表示对div样式的具体指定，可以有多个
5．如果有多个，使用;分开即动
6.当运行页面时，div就会被div渲染，修饰
7．小经验:在调试css时，可以通过修改颜色，或者大小来看
8. css的注释是/**/，快捷键ctrl+/
-->
<style type="text/css">
div{
width: 300px;
height: 100px;
background-color: beige;
}
</style>
</head>
<body>
<div>hello,武汉</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,北京</div>
<br/>
<div>hello,广州</div>
<br/>
</body>
</html>
css语法
字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
/*
说明:
颜色可以写颜色名比如 green,
也可以写rgb值比如 rgb(200,200,200)
和十六进制表示值比如#708090
color: rgb(255，222，1); //color: #ff7d44; //color: red ;
*/
div{
/*
有三种方式，指定颜色
1．英文
2. 16进制#于f7d44[使用最多]
3．三原色rgb(1,1,1)
*/
color: crimson;
}
</style>
</head>
<body>
<div>www.baidu.com</div>
</body>
</html>
字体边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
/*
width: 300px是具体的像素
width: 50% 是百分比
*/
width: 300px;
height: 100px;
border: 1px solid red; /*边框实线*/
/*border: 1px dashed red; 边框虚线*/
}
</style>
</head>
<body>
<div>www.baidu.com</div>
</body>
</html>
背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 300px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>TEST TEST</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
说明:
1. font-size:指定大小，可以按照像素大小
2. font-weight :指定是否是粗体
3. font-family :指定字体类型
*/
div{
font-size: 100px;
font-weight: bold;
font-family: 黑体;
}
</style>
</head>
<body>
<div>TEXT</div>
</body>
</html>
DIV居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
margin-left margin-right如果设置为auto，表示左右居中
*/
div{
border: 1px solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>TEXT</div>
</body>
</html>
文本居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 1px solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div>TEXT</div>
</body>
</html>
超链接去下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>
表格细线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
设置边框: border: 1px solid black
将边框合并: border-collapse : collapse;
指定宽度:width
设置边框:给td, th指定即可 border: 1px solid black
*/
/*
1. table, tr, td, th表示组合选择器
2．就是table、tr、td和th,都用统一的格式指定,可以提高复用性
3. 如果只指定其中一个的话,那么只有该属性线条
*/
table,tr,td,th{
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>
列表去修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul{
/*说明:list-style : none表示去掉默认的修饰*/
list-style: none;
}
</style>
</head>
<body>
<ul type="dist">
<li>西游记</li>
<li>红楼梦</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
</body>
</html>
css使用的三种方式
方式1︰在标签的style属性上设置css样式
标签多了。样式多了，代码量庞大
可读性差
css代码没有复用性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 200px;height: 100px;background-color: red">hello,武汉</div>
<br/>
<div style="width: 200px;height: 100px;background-color: red">hello,上海</div>
<br/>
<div style="width: 200px;height: 100px;background-color: red">hello,北京</div>
<br/>
</body>
</html>
方式2:在head标签中，使用style标签来定义需要的CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: red;
}
span{
border: 1px solid blue;
}
</style>
</head>
<body>
<div>hello,武汉</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,北京</div>
<br/>
<span>hello,world</span>
</body>
</html>
方式3∶把css样式写成单独的css文件，再通过link标签引入
创建css目录，写入外部css文件
div {
width: 200px;
height: 100px;
background-color: red;
}
span {
border: 1px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. rel : relation关联
2. href表示要引入的css文件的位置，可以是web的完整路径
3. type="text/css"可以有，也可以不写
-->
<link rel="stylesheet" type="text/css" href=".css/my.css">
</head>
<body>
<div>hello,武汉</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,北京</div>
<br/>
<span>hello,world</span>
</body>
</html>
css元素选择器
1.最常见的 CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
2.css元素/标签选择器通常是某个HTML元素，比如 p、h1、a等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
说明:元素选择器会修饰所有的对应的元素
*/
div{
height: 50px;
width: 100px;
background-color: red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div>hello world</div>
<p>你好，世界</p>
</body>
</html>
id选择器
- id选择器可以为标有特定id 的HTML元素指定特定的样式。
- 2.id选择器以"#”来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
1．使用id选择器，需要先在要修饰元素指定id属性，id值是程序员自己指定
2. id是唯一的，不能重复
3．在<style>标签中指定id选择器时，前面需要有#id值
*/
#t1{
color: red;
}
#t2{
color: darkgrey;
}
</style>
</head>
<body>
<h1 id="t1">hello world</h1>
<p id="t2">你好，世界</p>
</body>
</html>
class选择器
1.class类选择器，可以通过class属性选择去使用这个样式
2.基本语法.class 属性值{属性：值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1．使用class选择器，需要在被修饰的元素上，设置class属性，属性值程序员指定
2. class属性的值，可以重复
3.需要在<style></style>指定类选择器的具体样式，前面需要是 .类选择器名称
-->
<style type="text/css">
.css1{
color: red;
}
.css2{
color: blue;
}
</style>
</head>
<body>
<div class="css1">hello world</div>
<div class="css1">TEST</div>
<h1 class="css2">你好,世界</h1>
<span class="css2">大家好</span>
</body>
</html>
组合选择器
1.组合选择器可以让多个选择器共用同一个css样式代码
2.语法格式 选择器1，选择器2，选择器n{属性:值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
组合选择器的基本语法:
选择器1,选择器2,选择器n{属性: 值;}
*/
.css1,#id01{
width: 100px;
height: 100px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="css1">hello world</div>
<h1 id="id01">你好,世界</h1>
</body>
</html>
选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
1，行内样式 > id选择器 > class选择器 > 元素选择器
*/
#id1{
color: blue;
}
.class1{
color: chartreuse;
}
h1{
color: darkorchid;
}
</style>
</head>
<body>
<h1 style="color: red" id="id1" class="class1">hello world</h1>
</body>
</html>
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
