CSS
CSS简述
- CSS是什么?有什么作用?<br/> CSS(Cascading Style Sheets):层叠样式表。
CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽度、边框样式、边距等)以及版式的布局等外观显示样式。<br/> CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。
CSS的代码规范
- 放置规范<br/> 在<style>标签内容体中书写CSS样式代码,<style>标签放置在<head>标签中。
- 格式规范<br/> 选择器名称 {属性名:属性值; 属性名:属性值;......}<br/>
选择器:即指定CSS样式作用在哪些HTML标签上。
- 代码规范<br/>
- 属性名和属性值之间是键值对关系。
- 属性名和属性值之间用”:“连接,最后”;“结尾。(例如:font-size:10px)
- 如果一个属性名有多个值,多个值之间用空格隔开。(例如:border:5px solid red;)
- CSS注释:/*注释内容*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
font-size:120px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>
CSS选择器
基本选择器
- 元素选择器<br/> HTML标签又名HTML元素。 元素选择器:即以HTML标签名作为选择器名称。<br/> 作用:选择CSS样式代码,作用于对应标签上。
- 格式<br/>
标签名{ /*CSS样式代码*/ }
<br/>- 适用范围:适用于将相同样式作用在多个同名标签上。
- 类选择器<br/> 每个HTML标签都有一个class属性,class属性值即为类名。<br/> 类选择器:即以HTML的类名(class属性值)作为选择器名称。<br/> 作用:选择CSS样式作为代码,作用于对应类名的HTML标签上。
- 格式:<br/>
.类名{ /*CSS样式代码*/ }
- 使用范围:适用于将样式一次作用在相同类名的标签上。
- id选择器<br/> 每个HTML标签都有一个id属性,id的属性值必须在本页面是唯一的。<br/> id选择器:即以HTML的id(id属性值)作为选择器名称。<br/> 作用:选择器CSS样式代码,作用于某个规定id值的HTML标签上。
- 格式:<br/>
#id值{ /*CSS样式代码*/ }
*适用范围:适用于将样式作用在某个标签上(更有针对性)。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
color:blue;
}
.div1{
border:1px solid red;
background-color:yellow;
}
#div2{
border:1px solid black;
background-color:green;
}
</style>
</head>
<body>
<span>行内标签<span>
<div class="div1">块级标签1<div>
<div id="div2">块级标签2<div >
</body>
</html>
基本选择器的组合方式
- 层级关系<br/> 标签和标签之间有层级关系,例如<html>标签中的子标签为<body>标签。<br/> 我们可以对基本选择器进行组合,表现出层级关系,从而更加针对性地把样式作用于某些标签上。
- 格式:<br/>
选择器1 选择器2 ......{ /*CSS样式代码*/ }
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想火</font>
</div>
<font>我想火火不了</font>
</body>
</html>
CSS样式
边框属性
- border<br/> 设置边框的样式
- 格式:宽度 样式 颜色。 (例如:1px solid red -> 1像素粗 实线 红色边框)
- width<br/> 用于设置标签的宽度。
- height<br/> 用于设置标签的高度。
- background-color<br/> 用于设置标签的背景颜色。
- 背景颜色设置的两种主流方式:<br/> 1.英文单词->例如:red;blue。yellow;<br/> 2.颜色代码->例如:#fff。(格式:#红绿蓝,每个颜色用两个16进制位数表示)
布局
- float<br/> 通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方向式进行排版,就需要使用浮动属性。
- 格式:
选择器{float:属性值;}
<br/>- 常用属性值:<br/> none:元素不浮动(默认值)。<br/> left:元素向左浮动。<br/> right:元素向右浮动。<br/>
注意事项:因为元素设置浮动属性后,会脱离原有文档流(会脱离原有的版式),从而会影响其他元素的样式,所以设置浮动后,页面样式需要重新调整。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
转换
- display<br/> HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块级元素和行内元素。
- 块元素: 以区域块的方式出现,每个块标签独自占据一整行或多整行,块结束会自动换行。块结束会自动换行。<br/> 常见的块元素:<h1>、<p>、<div>、<ul>等。
- 行内元素: 根据内容多少来占用行内空间,不会自动换行。<br/> 常见的行内元素:<span>、<a>等。<br/>
- display属性可以使得元素在行内元素和块元素之间相互转换。
- 格式:<br/> 选择器[display属性值]
- 常用的属性值:<br/> block:此元素将显示为块元素(块元素默认的display属性值)<br/> inline:此元素将显示为行内元素(行内元素默认的display属性值)<br/> none:此元素将被隐藏,不显示,也不占用页面空间。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
display:inline;
}
</style>
</head>
<body>
<div>变为行内元素</div>
<span>行内元素</span>
</body>
</html>
字体
- font-size<br/> 用于设置字体的大小。
- color<br/> 用于设置字体的颜色。<br/>
来源:oschina
链接:https://my.oschina.net/u/4364289/blog/4174540