CSS技术介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。作用:美化网页。
CSS语法规则
选择器{属性1:值1;属性2:值2}。如:
div{
height: 0px;
width: 0px;
}
CSS与HTML的结合方式
行内样式:通过标签的style属性来定义样式
<div style="border: 1px solid red;">div 标签 1</div>
内部样式:在head标签里用style标签来定义样式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{border: 1px solid red;}
</style>
</head>
外部样式:通过link标签来引入外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
.div2{
height: 50px;
width: 50px;
background: blue;
}
</style>
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<div class="div1" style="background: red; height: 50px; width: 50px;">内联</div>
<div class="div2" >内部</div>
<div class="div3">外部</div>
</body>
</html>
<!--css包下的style.css文件中-->
.div3{
width: 50px;
height: 50px;
background: green;
}
CSS选择器
标签名选择器
语法 :
标签名 {
属性名 : 属性值;
...
}
p{color:red;}
id选择器
在同一个页面,id是不能重复的,只能给唯一的一个标签使用。
语法 :
#id属性名 {
属性名 : 属性值;
...
}
id="属性名"
class选择器(类选择器)
在标签上添加 class属性,然后在style里面写选择器 (. 开头),更加精确的去控制样式。class名可以有多个。
语法 :
.class属性名 {
属性名:属性值;
...
}
class="属性名"
组合选择器
组合选择器的格式是:
选择器 1,选择器 2,选择器 n{
属性:值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
常用样式
1、字体颜色 color:red;
颜色可以写颜色名如:black,blue,red,green 等。
颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必 须加#。
2、宽度、高度width:19px; height:20px;
可以写像素值:19px; 也可以写百分比值:20%;
3、背景颜色
background-color:#0F2D4C;
4、字体样式
color:#FF0000;
字体颜色红色font-size:20px;
字体大小
5、边框
红色1像素实线边框border:1px solid red;
6、div居中
margin-left: auto; margin-right: auto;
7、文本居中
text-align: center;
8、超链接去下划线
text-decoration: none;
9、表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {border: 1px solid black; /设置边框/ }
10、列表去除修饰
ul { list-style: none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用样式.html</title>
<style type="text/css">
div {
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table {
border: 1px red solid;
border-collapse: collapse;
}
td {
border: 1px red solid;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<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>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>
评论区