CSS篇
目录
一. CSS技术介绍
CSS是层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二. CSS语法规则:
选择器p{属性(font-size): 值(80px);}
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性(property):是要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p{color:blue}
多个声明:如果定义不止一个声明,则需要分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号),一般每行只描述一个属性。
例如:
p{
color:red;
font-size:30px;
}
CSS注释:/*注释内容*/
三. CSS是HTML的结合方式
1. 第一种
在标签的style属性上设置"key:value value;",修改标签样式。
使用方法如图下:
<body><!--边框像素为1,是红色实线-->
<div style="border: 1px solid red">
第一个
</div>
<span style="border: 1px solid red">
第二个
</span>
<span style="border: 1px solid red">
第三个
</span>
</body>
这种方式具有很多缺点:
(1)如果标签多了,样式多了,代码量非常庞大。
(2)可读性非常差。
(3)CSS代码没有复用性。
2. 第二种
在head标签中,使用style标签来定义各种自己需要的CSS样式。
格式如下:xxx{
key : value value;
}
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
/*注释不一样*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>
第一个
</div>
<span 1px solid red">
第二个
</span>
<span>
第三个
</span>
</body>
注意CSS语言中的注释方法不同
这种方法的缺点:
(1)只能在同一页面复用代码,不能在多个页面中复用CSS代码。
(2)维护起来不方便,实际项目中会有成千上万的页面,要到每个页面中去修改,工作量太大了。
3. 第三种
把css样式写成一个单独的css文件,再通过link标签引用即可复用。
使用html的<link rel="stylesheet" type="text/css" href="./styles.css"/>标签 导入css样式文件。
使用过程如下:
创建css文件
在css文件中输入页面样式
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
html中进行引用
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
<div>
第一个
</div>
<span>
第二个
</span>
<span>
第三个
</span>
然后运行即可达成想要的效果。
四. CSS选择器
1. 标签名选择器
标签名选择器的格式是:
标签名{
属性:值:
}
标签名选择器可以决定哪些标签被动地使用这个样式。
2. id选择器
id选择器的格式是:
#id属性值{
属性:值;
}
id选择器,可以让我们通过id属性选择性的去使用这个样式。
它们的使用方法如下:
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style type="text/css">
div{
border: 1px solid red;
color: blue;
font-size: 30px;
}
#id001{
border: 1px dashed red;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div id="id001">div标签2</div>
</body>
3. class选择器(类选择器)
class类型选择器的格式是:
.class属性值{
属性:值;
}
class类型选择器可以通过class属性有效地选择性地去使用这个样式。
它的使用方法如下:
<style type="text/css">
.class01{
color: blue;
font-size: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">标签1</div>
4. 组合选择器
组合选择器的格式是:
选择器1,选择器2,选择器n{
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码。
使用方法如下:
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">标签1</div>
<span id="id01">span标签</span><br/>
五. 常用样式
1. 颜色
color:red;
颜色以可以写颜色名red,blue等,也可以写rab值和十六进制表示值:如rgb(255,0,0),#00F6DE(十六进制必须前加#)
2. 宽度
width:19px
宽度可以写像素值:10px;也可以写百分比值:20%。
3. 高度
height:20px
高度可以写像素值:10px;也可以写百分比值:20%。
4. 背景颜色
background-color:#0F2D4C
5. 字体样式
color:#FF0000;字体颜色红色
字体大小:font-size:30px;
6. 红色1像素实线边框
border:1px solid red;
7. DIV居中
margin-left:auto;
margin-right:auto;
8. 文本居中
text-align:center;
9. 超链接去下划线
text-decoration:none;
10. 表格细线
table{
border:1px solid black;/*设置边框*/
border-collapse:collapse;/*将边框合并*/
}
td,th{
border:1px solid black;/*设置边框*/
}
11. 去除列表修饰
ul{
list-style:none;
}