CSS
简述
CSS 是一门语言,用于控制网页表现。W3C标准规定了网页是由以下组成:
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
CSS也有一个专业的名字:Cascading Style Sheet(层叠样式表)。
CSS的代码规范
格式规范:
-选择器名称{属性名1:属性值1;属性名2:属性值2;……}
选择器:即指定CSS样式作用在哪些HTML标签上。
代码规范:
- 属性名和属性值之间是键值对关系;
- 属性名和属性值之间用“:”连接,最后“;”结尾;
例如:font-size:120px;
如果一个属性名有多个值,多个值之间用空格隔开。"
例如: border:5px solid red;
CSS注释:/ * 注释内容 * /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
font-size:60px;
color:red;
border:1px solid blueviolet;
/* java */
}
</style>
</head>
<body>
<span>111111111</span>
<span>22222222</span>
</body>
</html>
CSS选择器
选择器
元素选择器
元素选择器:以HTML的标签名作为选择器名称
- 格式:
标签名{
CSS样式代码
}
适用范围:适用于将样式作用在相同标签名的标签上。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-size: 60px;
}
div{
font-size: 60px;
}
</style>
</head>
<body>
<span>我是span1111111</span>
<span>我是span222222222</span>
<div>我是div11111111</div>
<div>我是div222222222</div>
</body>
</html>
类选择器
类选择器:即以HTML的类名(class属性值)作为选择器名称。
- 格式:
.类名{
CSS样式代码
}
适用范围:适用于将样式一次性作用在相同类名的标签上(即使标签名不同)。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.redF{
color:red;
}
</style>
</head>
<body>
<span>span1:我是黑色</span>
<span class="redF">span2:我是红色</span>
<div>div1:我是黑色</div>
<div class="redF">div2:我是红色</div>
</body>
</html>
ID选择器
每个HTML标签都有一个id属性,id的属性值必须在本页面是唯一的。
ID选择器:选择CSS样式代码作用在某个规定ID值的HTML标签上。
-
格式:
#id值{
CSS样式代码
}适用范围:适用于将样式作用于某个标签上(更有针对性)
注意:
必须手动保证ID值在本页面是唯一的
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
color: red;
}
</style>
</head>
<body>
<span>span1:我是黑色</span>
<span >span2:我是红色</span>
<div>div1:我是黑色</div>
<div id="d1">div2:我是红色</div>
</body>
</html>
基本选择器的组合方式
层级关系
标签和标签之间有层级关系,例如:标签的子标签为标签。
我们可以对基本选择器进行组合,表现出层级关系,从而更加针对性地把样式作用于某些标签上。
- 格式:
选择器1 选择器2…{
css样式代码
}
是选择器1下的选择器2。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div font{
color: red;
}
</style>
</head>
<body>
<div>
<font>我想变红</font>
我想保持黑色
</div>
<font>我保持黑色</font>
</body>
</html>
CSS样式
边框属性
-
border:设置边框的样式。
格式:border:宽度 样式 颜色;
例如:border: 1px solid red;
线条样式:solid实线 none无边 double双线 -
width:用来设置标签的宽度
格式:width:** px;
例如width:60px; -
height:用来设置标签的长度
格式:height:** px;
例如height:60px; -
background-color:设置标签的背景颜色
背景颜色设置的两种主流方式:
①英文单词 例如:red blue yellow
②颜色代码 格式:#红绿蓝,每一个颜色用两个16进制位数表示+
例如:#ff1100 红色ff,绿色11,蓝色00,红色颜色最重,绿色其次,没有蓝色。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
width:300px;
height: 300px;
background-color:#0011ff;
}
</style>
</head>
<body>
<div>最难不过坚持</div>
</body>
</html>
布局
通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动属性float.
- float:
格式:
选择器{float:属性值;}
float的常用属性值:
- none:元素不浮动(默认值)
- left:元素向左浮动
- right:元素向右浮动
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color:red;
width: 100px;
height: 100px;
float:right;
}
#d2{
background-color:green;
width: 80px;
height: 80px;
float: right;
}
#d3{
background-color:blue;
width: 60px;
height: 60px;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
注意:因为元素设置浮动属性后,会脱离原有文档流(会脱离原有的板式),从而会影响其他元素的样式,所以设置浮动以后,页面样式需要重新调整.
接着看代码,没有加float和加了的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title><style>
#d1{
background-color:red;
width: 60px;
height: 60px;
float:left;
}
#d2{
background-color:green;
width: 80px;
height: 80px;
float:left;
}
#d3{
background-color:blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
转换
HTML提供了丰富的标签,这些标签被定义成了不同类型,一般分为:块级元素和行内元素。
- 块级元素:以区域块的方式出现,每个块标签占据一整行或多整行,块结束后会自动换行
-
- 常见的块级元素:< h1 >,< p >,< div >,< ul >等
- 行内元素:根据内容多少来占用行内元素,不自动换行
-
- 常见的行内元素:< span >,< a >
display属性可以使元素在行内元素和块级元素之间相互转换。
- 格式:选择器{display:属性值;}
- display常用的属性值:
-
- block:此元素将显为块元素(块元素默认的displav属性值)。
-
- inline:此元素将显示为行内元素(行内元素默认的display属性值)。
-
- none:此元素将被隐藏,不显示,也不占用页面空间。
代码展示:
- none:此元素将被隐藏,不显示,也不占用页面空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: inline;
}
li{
display: inline;
}
span{
display:block ;
}
a{
display: none;
}
</style>
</head>
<body>
<h1>块级元素1-div--由块级元素-----》行内元素【不自动换行】</h1>
<div>div1</div>
<div>div2</div>
<h1>块级元素2-无序列表</h1>
<ul>
<li>赵庄</li>
<li>张三</li>
<li>王五</li>
</ul>
<h1>行内元素1-span--由行内元素-----》块级元素【自动换行]</h1>
<span>span1</span>
<span>span2</span>
<h1>行内元素2--a</h1>
<a>a1</a>
<a>a2</a>
你好
</body>
</html>
字体
字体在CSS下可以无限大
- font-size:数字 px;
- color:颜色;
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-size: 120px;
color: red;
}
</style>
</head>
<body>
你好么
<span>我想变大变红</span>
你好啊
</body>
</html>