一、CSS是什么？
CSS 指层叠样式表 (Cascading Style Sheets)
二、CSS的作用?
CSS是用来为网页html元素设置/添加样式，使得html网页好看。
三、 在HTML网页中如何使用CSS?
1.内联定义 (Inline Styles)
将样式属性设置，通过style属性设置在html标记的开始标记中。
格式:<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>
2.内部样式块
将样式设置，放在head的style标记中。
格式: css选择器{
css样式名称:样式值;
css样式名称:样式值;
css样式名称:样式值;
}
3.链入外部样式表文件 Linking to a Style Sheet
通过在head标记中的link标记将外部样式文件【.css】导入至当前的html文件中
3.1创建外部样式文件【.css】
css选择器{
css样式名称:样式值;
css样式名称:样式值;
css样式名称:样式值;
} 注意后缀名是.css结尾
2.head标记中的link标记将外部样式文件【.css】导入
<link rel=stylesheet href=”样式文件的路径“ type=”text/css”>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css如何在HTML中使用</title>
<style>
#p1{
font-size: 30px;
color: brown;
}
</style>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h4>1.内联定义 (Inline Styles)</h4>
<h5>将样式属性设置，通过style属性设置在html标记的开始标记中。</h5>
<p style="color: red;font-size: 30px;">测试内联定义</p>
<h4>2.内部样式块</h4>
<h5>将样式设置，放在head的style标记中。</h5>
<p id="p1">内部样式块</p>
<h4>3.链入外部样式表文件</h4>
<h5>通过在head标记中的link标记将外部样式文件【.css】导入至当前的html文件中</h5>
<p class="p1">链入外部样式表文件</p>
</body>
</html>
四、CSS语法
我们发现在内部样式块,链入外部样式表的方式中，编写css样式的操作格式是相同
格式: css选择器{
css样式名称:样式值;
css样式名称:样式值;
css样式名称:样式值;
}
上面编写css样式的操作格式有2部分组成
1.css选择器具体样式设置—>键值对
2.【css样式名称:取值】
例如：
#p1——-css选择器
{font-size: 30px;color: blue; }—–具体样式设置，多个样式属性设置之间使用”;”分割。
#p1{
font-size: 30px;
color: blue;
}
五、CSS选择器
css选择器就是选中需要设置样式的html元素。
css中提供的选择器很多。我们学习几个常用的选择器。
1.元素选择器
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
p{
font-size: 30px;
color:springgreen;
}
</style>
</head>
<body>
<h4>1.元素选择器---根据html元素名称得到需要设置样式的html元素</h4>
<p>测试元素选择器</p>
<p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
</body>
</html>
2.id选择器
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#p1{
font-size: 30px;
color: springgreen;
}
</style>
</head>
<body>
<h4>id选择器---根据html元素的id属性值得到需要设置样式的html元素</h4>
<p id="p1">测试id选择器</p>
<p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
</body>
</html>
3.class（类）选择器
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
.p1{
font-size: 30px;
color: springgreen;
}
</style>
</head>
<body>
<h4>class选择器---根据html元素的class属性值得到需要设置样式的html元素</h4>
<p class="p1">测试class选择器</p>
<p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
</body>
</html>
注意:选择器优先级: id > class > 元素
4.包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<style>
#div1{
width: 300px;
height: 250px;
background-color: springgreen;
}
#div2{
width: 300px;
height: 100px;
background-color: red;
}
#div1 p{
font-size: 30px;
color: royalblue;
}
</style>
</head>
<body>
<h4>包含选择器--得到父元素中所有子元素,包括子子元素.</h4>
<div id="div1">
<div id="div2">
<p>测试包含选择器</p>
</div>
</div>
<p>非div中的p元素</p>
</body>
</html>
5.子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
<style>
#div1{
width: 300px;
height: 100px;
background-color: springgreen;
}
#div2{
width: 300px;
height: 50px;
background-color: red;
}
#div2 > p{
font-size: 30px;
color: royalblue;
}
</style>
</head>
<body>
<h4>子元素选择器--选中当前父元素的直接子元素，不包括子子元素</h4>
<div id="div1">
<div id="div2">
<p>测试子元素选择器</p>
</div>
</div>
<p>非div中的p元素</p>
</body>
</html>
6.属性选择器
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/* 选择a标签中的target属性 */
a[target]{
font-size: 30px;
color: seagreen;
}
/* 选择a标签中href属性是test2.html属性的 */
a[href='test2.html']{
font-size: 40px;
color: red;
}
/* 得到a标签汇总href属性是test3.htnl和target属性是_self的 */
a[href='test3.html'][target='_self']{
font-size: 30px;
color: saddlebrown;
}
</style>
</head>
<body>
<h4>属性选择器--根据html元素的属性，得到需要设置css的html元素</h4>
<a href="test1.html">打开test1.html文件</a><br>
<a href="test2.html" target="_blank">打开test2.html文件</test></a><br>
<a href="test3.html" target="_self">打开test3.html文件</a>
</body>
</html>
7.选择器分组
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器分组</title>
<style>
div{
width: 350px;
height: 200px;
background-color: yellow;
}
#p1,#d1 h3,.p1>span{
font-size: 30px;
color: turquoise;
}
</style>
</head>
<body>
<h4>选择器分组--得到同一个html文件中不同位置的元素，作用同一种样式</h4>
<p id="p1">开始p元素</p>
<div id="d1">
<h3>包含在div中的标题标记</h3>
</div>
<p class="p1">div元素后面的<span>p元素</span></p>
</body>
</html>
注意：选择器在使用时候都是混合使用，可以让我们很快得到自己需要控制的元素。
六、CSS伪类
|
a:link |
选择所有未访问链接 |
|
|
a:visited |
选择所有访问过的链接 |
|
|
a:active |
选择正在活动链接 |
|
|
a:hover |
把鼠标放在链接上的状态 |
|
|
input:focus |
选择元素输入后具有焦点 |
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css伪类</title>
<style>
a:link{
color: black;
font-size: 20px;
}
a[href="test2.html"]:active{
color: red;
font-size: 30px;
}
a[href="test3.html"]:hover{
color: yellow;
font-size: 35px;
}
a[href="test4.html"]:visited{
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<h4>CSS伪类是用来添加一些选择器的特殊效果</h4>
<h5>:link a:link 选择所有未访问链接</h5>
<a href="test1.html" target="_blank">测试CSS 伪类</a>
<h5>:active a:active 选择正在活动链接</h5>
<a href="test2.html" target="_blank">测试CSS 伪类</a>
<h5>:hover a:hover 把鼠标放在链接上的状态</h5>
<a href="test3.html">测试CSS 伪类</a>
<h5>:visited a:visited 选择过后的链接状态</h5>
<a href="test4.html">测试CSS 伪类</a>
<h5>:focus input:focus 选择元素输入后具有焦点</h5>
</body>
</html>
七、具体样式设置
1.css背景设置
background-color：颜色单词/颜色码 定义了元素的背景颜色
background-image：url(‘图片路径’)描述了元素的背景图像，默认水平垂直方向平铺
background-repeat：设置背景图像水平或垂直平铺
repeat-x:水平平铺
repeat-y:垂直平铺
repeat:水平垂直平铺
no-repeat:不平铺
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置</title>
<style>
body{
/*background-color: hotpink;*/
background-image: url("imgs/avatar04.png");
background-repeat: no-repeat;
background-attachment: local;
background-position: center center;
}
</style>
</head>
<body>
<h1>background-color:颜色单词/颜色码 定义了元素的颜色</h1>
<h1>background-image:url("图片路径") 描述了元素的背景图片，默认水平垂直方向平铺</h1>
<h2>background-repeat:设置背景图像水平或者垂直平铺</h2>
<h2>repeat-x:水平平铺</h2>
<h2>repeat-y:垂直平铺</h2>
<h2>norepeat:不平铺</h2>
<h1>background-attachment：设置背景图像是否固定或者随着其余网页滚动</h1>
<h2>scroll 背景图像随着页面的滚动而滚动</h2>
<h2>fixed 背景图像不会随着页面的滚动而滚动</h2>
<h2>local 背景图像会随着元素内容滚动</h2>
<h1>background-position:属性设置背景图像的起始位置</h1>
<h2>left top/left center/ left bottom/right top/right center/ right bottom/center top/ center center/center bottom</h2>
</body>
</html>
2.css文本属性设置
color:颜色单词/颜色码—设置文字的颜色
text-align:left/center/right —设置文本的水平对齐方式[居中或右对齐或左对齐]
text-decoration:overline/line-through/underline/none—设置或删除文本的装饰
text-transform:uppercase/lowercase/capitalize—用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。
text-indent:数字px—-指定文本的第一行的缩进
letter-spacing:数字px—-设置字符间距
line-height:数字px—-设置行高
vertical-align:top/middle/bottom—-设置一个元素的垂直对齐方式
word-spacing:数字px—-增加或减少字与字之间的空白
text-shadow:水平 垂直 模糊 颜色—-设置文字阴影
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性设置</title>
<style>
#p1{
color: lawngreen;
}
#p2{
text-align: center;
}
#p3{
text-decoration:underline;
}
#p4{
text-transform: capitalize;
}
.p2{
text-indent: 20px;
letter-spacing: 5px;
line-height: 30px;
word-spacing: 30px;
}
tr > td{
vertical-align: bottom;
}
#p5{
text-shadow: 3px 2px 2px blue;
}
</style>
</head>
<body>
<p id="p1">color:颜色单词/颜色码 设置文字的颜色</p>
<p id="p2">text-align:center/left/right 设置文本的水平对齐方式【居中或右对齐或左对齐】</p>
<p id="p3">text-decoration:overline/line-through/underline/none 设置或删除文本的修饰</p>
<p id="p4">text-transform:uppercase(大写)/lowercase(小写)/capitalize(首字母大写) 用来指定在一个文本中的大写和小写字母，可设置大写或小写字母，或每个单词的手字母大写</p>
<p class="p2">
text-indent:指定文本的第一行的缩进<br>
letter-spacing:设置字符间距<br>
line-height:设置字体行距<br>
word-spacing:增加或减少字与字之间的空白<br>
hello wangxing
</p>
<table border="1px">
<tr style="height: 80px;">
<td>vertical-align:top/middle/bottom----设置一个元素的垂直对齐方式</td>
</tr>
</table>
<p id="p5">text-shadow:水平 垂直 模糊 颜色----设置文字阴影</p>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79874.html
