CSS简介
CSS,全称Cascading Style Sheets，即层叠样式表。
html语言可以构建出一个网页所需要的各种元素，给网页画一个草图。
css语言则可以改变元素的样式，对简单网页进行装饰，让网页的草图越来越精细，越来越精美。
-
样式:可以给html元素设置样式，如边框、字体、颜色…
-
层叠:可以给同一个元素设置多个样式。
css文件后缀名为.css。
css代码注释格式为/*注释内容*/。
基本要素
通过各种选择器定位到某个元素，对该元素设置各种样式属性
选择器 {
样式属性1:值;
样式属性2:值;
....
样式属性n:值;
}
使用方式
行内式
直接在html元素的标签中添加style属性。
style属性的值为样式属性表的内容。
这种情况下已经定位到了元素，不需要选择器。
如:
<p>
HTML
</p>
<p style="background:red;font-size:50px">
CSS
</p>
内嵌式
在html文件的head元素中加入style标签。在style元素内，设置选择器和对应样式.
如:
<html>
<head>
<style type="text/css">
/*标签选择器，后面会提到*/
p {
background:red;
font-size:50px;
}
/*让所有p元素背景色为红色，字高为50像素*/
</style>
</head>
<body>
<p> <!--被p标签选择器定位到-->
段落标签1
</p>
<h1>
标题
</h1>
<p> <!--被p标签选择器定位到-->
段落标签2
</p>
</body>
</html>
外链式
将所有选择器及对应样式写到单独的一份css文件中。待需要使用时，在html代码的head元素中用<link>标签引入。
<link rel="stylesheet" type="text/css" href="mystyle.css">
- rel全称relationship,代表引入的文件与本html文件的关系。stylesheet:样式表。
- type代表引入的文件的类型
- href代表引入的文件的路径/网址
/*mystyle.css*/
p {
background:red;
font-size:50px;
}
h1 {
background:blue;
font-size:20px;
}
<!--myweb.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p> <!--被p标签选择器定位到-->
段落标签
</p>
<h1> <!--被h1标签选择器定位到-->
标题
</h1>
</body>
</html>
选择器类型
| 名称 | 特点 | 示例 |
|---|---|---|
| 标签选择器 | 定位到某标签，给所有该标签的元素设置样式。直接用标签名标识。 | div { … } |
| 类选择器 | 先构建好样式类，再在想应用该样式类的元素的标签内添加属性class 。用.类名标识 | .classname { … } |
| id选择器 | 给元素设置唯一id（id属性），通过唯一id选择对应元素。用#id名标识 | #id { … } |
| 层级选择器 | 通过选择器的层级关系，定位到某一元素。按层级先后关系写出多个选择器标识。 | div p { … } |
| 组选择器 | 同时给多个选择器设置共同的样式属性。多个选择器标识之间以, 分隔。 | div,p { … } |
| 伪类选择器 | 给元素添加特殊效果，如鼠标悬停样式改变，在对应选择器后加:hover | p:hover { … } |
| !important | 希望某个样式属性最后一定是怎样的效果，后面加上!important | p{background !important;} |
选择器优先级
对于定位到的同一个元素，各选择器的样式属性
- 如果没有冲突，就都进行应用
- 如果发生冲突，按照 标签选择器<类选择器/伪类选择器<id选择器<style属性<
!important的优先级进行应用。其中同一级别的选择器，后写的优先级高。
总结而言:如果样式发生矛盾，越精确(普通意义上)的选择器的优先级越高。一样精确的，后写的优先级高。
如:
/*mystyle.css*/
/*标签选择器*/
p {
background:red;
font-size:20px;
}
/*类选择器*/
.button {
width:150px;
height:75px;
background:blue;
}
/*id选择器*/
#brown_text {
width:200px;
height:150px;
background:brown;
}
/*层级选择器*/
div p {
background:yellow;
font-size:30px;
}
/*组选择器*/
h1,h2,h3 {
background:green;
}
/*伪类选择器*/
.button:hover {
width:75px;
height:150px;
background:pink;
}
<!--myweb.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>
p标签选择器选中
</p>
<p class="button">
button类选择器选中 <!--p标签选择器没有类选择器优先级高-->
</p>
<p id="brown_text">
balck_text id选择器选中 <!--p标签选择器没有id选择器优先级高-->
</p>
<div>
<p>
div p层级选择器选中 <!--层级选择器比标签选择器优先级高-->
</p>
</div>
<h1>组选择器</h1>
<h2>组选择器</h2>
<h3>组选择器</h3>
</body>
</html>
p标签元素的字号(font-size)属性只有p标签选择器进行了设置，没有发生冲突。所以字号都是20px.
从背景色属性(background)最后应用的样式可以看出部分选择器之间的优先级。
其中hover伪类效果如下：
鼠标悬停,样式由上变到下
文本常用样式属性
| 属性名 | 可用的值 | 含义 |
|---|---|---|
| color | 六进制RGB（#112233）；red,blue等常见颜色；… | 设置字体颜色 |
| font-size | 数字+单位。单位常见的有px(像素)、em(相对长度单位)… | 设置字号 |
| font-family | 各种字体。常见的有Microsoft Yahei(微软雅黑)，SimSun(宋体)… | 设置字体 |
| font-weight | 数字(常用100-900）;bold:加粗(700);normal:普通(视父元素而定)；bolder:相较于普通更粗;lighter:相对于普通而言更细… | 设置字体粗细 |
| line-height | 数字+单位。单位常见的有px(像素)、em(相对长度单位)… | 设置行高(字体高度+字体上下距边框的距离) |
| text-decoration | underline:下划线；overline：上划线；line-through:贯穿线；none:标准文本… | 设置文本装饰 |
| text-align | left:左对齐；right:右对齐；center:居中对齐… | 设置文本水平对齐方式 |
| text-indent | 数字+单位。单位常见的有px(像素)、em(相对长度单位)… | 设置首行缩进 |
如:
<head>
<style type="text/css">
p.special_p{
color:blue;
font-size:16px;
font-family:"SimSun";
font-weight:bold;
line-height:24px;
text-decoration: underline red;
}
</style>
</head>
<body>
<p class="special_p">
从前有座山，山里有座庙，<br>庙里有个和尚在讲鬼故事...
</p>
<p>
从前有座山，山里有座庙，<br>庙里有个和尚在讲鬼故事...
</p>
</body>
布局常用样式属性
盒子模型
每个html元素都相当于一个盒子。盒子里装有内容(content)。盒子有边框(border)。内容距离边框有一定距离，称为内边距（padding)。一个盒子与其他盒子之间也有一定的距离，这个距离称为外边距(margin)。
元素的大小由内容、边框、内边距决定。
如下面几幅图所示。
调整
/*设置内容宽高*/
height:10px;
width:10px;
/*设置一边的边框*/
border-top(left/right/bottom):10px solid red;
/*设置四边的边框*/
border:10px solid red;
/*设置一边的内边距*/
padding-top(left/right/bottom):20px;
/*设置四边的内边距*/
padding:20px;
/*设置一边的外边距*/
margin-top(left/right/bottom):20px;
/*设置四边的内边距*/
margin:20px;
元素溢出
当子元素的大小超过父元素时，会发生元素溢出现象。默认会显示出子元素溢出的部分。
<head>
<style type="text/css">
div {
width:100px;
height:100px;
background:red;
}
p {
width:80px;
height:200px;
background:blue;
}
</style>
</head>
<body>
<div>
<p>
元素溢出元素溢出元素溢出<br>
元素溢出元素溢出元素溢出<br>
元素溢出元素溢出元素溢出<br>
</p>
</div>
</body>
可以通过设置父元素的overflow属性样式来调整发生溢出后的显示方式。
overflow:visible; /*子元素就算溢出也要全部显示。这就是上面的默认情况*/
overflow:hidden; /*隐藏子元素溢出的部分*/
overflow:auto; /*可以通过滚动的方式查看子元素溢出的部分*/
....
上图为hidden，下图为auto
元素显示方式
通过display样式属性能够修改元素的显示方式。
display:none; /*隐藏元素且不占位置*/
display:block; /*以块元素方式显示。即独占一行(或前后自动换行)。*/
display:inline; /*以行内元素方式显示。即可与其他元素在一行内显示。(或前后不会自动换行)*/
....
修改元素背景
background:red; /*设置背景色*/
background:url(https://tse3-mm.cn.bing.net/th/id/OIP-C.vXx9JNr4qLPyjtQOZf10PwHaE8?pid=ImgDet&rs=1); /*设置背景图片*/
1336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
