css介绍
1、CSS(层叠样式表)是一种格式化网页的标准方式,用于设置网页的样式,并允许样式信息与网页内容分离的一种技术。
2、好处:
(1)将格式和结构分离
(2)精确控制页面布局
(3)制作体积更小、下载更快的网页
(4)可以实现许多网页同时更新
基本选择器
元素选择器
元素选择器是最常用的一种选择器,元素选择器声明了网页中所有相同元素的显示效果
基本语法:HTML元素{属性1:属性值1;属性2:属性值2;...}
类选择器
对相同元素的某些元素做特殊效果设置。
基本语法:.类选择器名{属性1:属性值1;属性2:属性值2;...}
说明:类选择器名称的第1个字符不能使用数字;类选择器的优先级高于元素选择器,所以相同属性的样式,类选择器的样式会覆盖元素选择器的样式,
类名在HTML页面中可以重名。
ID选择器
ID名称站在HTML页面中必须唯一。
基本语法:#id选择器名{属性1:属性值1;属性2:属性值2;...}
说明:id选择器名称的第一个字符不能使用数字;id选择器名不能有空格。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基本选择器的使用</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
p{color: goldenrod;}
h3{color: blueviolet;}
h4{color: rosybrown;}
.txt01{
color: #8A2BE2;
}
.txt02{
color: tomato;
}
.txt03{
color: saddlebrown;
}
.txt04{
color: sienna;
}
#txt01{
text-align: center;
color: rosybrown;
}
#txt02{
text-align: center;
font: 楷体;
color: goldenrod;
}
#txt03{
font: 楷体;
font-size: 22px;
align-content: center;
text-align: center;
color: chocolate;
margin: auto;
}
#txt04{
text-align: center;
color: forestgreen;
}
</style>
</head>
<body>
<h3>this is the head title!</h3>
<h4>this is the second title!</h4>
<p>古诗词鉴赏</p>
<h1 class="txt01">欢迎来到类选择器</h1>
<h2 class="txt02">数据分析总结表</h2>
<table class="txt03" border="2" width="200" cellspacing="0">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>12.9</td>
<td>12.4</td>
<td>13.9</td>
<td>12.3</td>
<td>11.9</td>
</tr>
</table>
<p class="txt04">分析结果</p>
<table id="txt03" border="1" cellpadding="8" cellspacing="0" width="400">
<tr>
<td>第一期</td>
<td>第二期</td>
<td>第三期</td>
<td>第四期</td>
<td>第五期</td>
</tr>
<tr>
<td>34.90</td>
<td>46.97</td>
<td>35.15</td>
<td>45.33</td>
<td>50.01</td>
</tr>
<tr>
<td>34.90</td>
<td>46.97</td>
<td>35.15</td>
<td>45.33</td>
<td>50.01</td>
</tr>
</table>
<p id="txt04">总结分析:</p>
</body>
</html>
通用选择器
通用选择器用通配符“*”表示,可以选择文档中的所有元素。通用选择器主要用于重置文档各元素的默认样式,一般用来重置文档元素的内、外边距。
基本语法:*{属性1:属性值1;属性2:属性值2;...}
常用:*{margin:0px;padding:0px;}//重置文档所有元素的内、外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style type="text/css">
*{
text-align: center;
font-size: 24px;
color: chocolate;
font: "楷体";
margin: auto;
}
</style>
</head>
<body>
<p> 欢迎来到通用选择器页面</p>
<table border="2">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>12.9</td>
<td>12.4</td>
<td>13.9</td>
<td>12.3</td>
<td>11.9</td>
</tr>
</table>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器的使用</title>
<style type="text/css">
a:link{
color: green;
text-decoration: none;
/*无下划线*/
}
a:visited{
color: darkblue;
}
a:hover{
color: #D2691E;
}
a:active{
color: mediumvioletred;
}
input:focus{
background: #BC8F8F;
}
p:first-child{
font-size: 30px;
color: firebrick;
}
li:first-child{
color: slateblue;
}
q:lang(no){
color: cornflowerblue;
font-size: 30px;
}
q:lang(zh){
color: darkmagenta;
font-size: 30px;
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/weixin_40119412/article/details/103562086">html基础-图片标签</a>
<br />
<a href="https://blog.csdn.net/weixin_40119412/article/details/103561685">html基础-列表标签</a>
<br />
<a href="https://blog.csdn.net/weixin_40119412/article/details/103570161">htnl基础-表格</a>
<br />
<a href="https://blog.csdn.net/weixin_40119412/article/details/103570404">html基础-表单</a>
<form action="">
姓名:<input type="text"/>
<br />
性别:<input type="radio" checked="checked" name="sex"/>男
<input type="radio" name="sex"/>女
</form>
<p >reckon<q lang="no">interpre</p>
<p>think<q lang="zh">interpre</p>
<p>consider</p>
<p>deem</p>
<ol type="A">
<li>vitical</li>
<li>impotant</li>
<li>essential,paramount</li>
</ol>
<div id="">
<p>reckon</p>
<p>think</p>
<p>consider</p>
<p>deem</p>
</div>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器的使用</title>
<style type="text/css">
p:first-letter{
font-size: 22px;
color: saddlebrown;
text-decoration:underline;
}
/*p:line{
color: slateblue;
}
p:before{
content: url(../img/bg.JPG);
}
p:after{
content: url(../img/bg.JPG);
}*/
</style>
</head>
<body>
<p>伪元素选择器:当选择器是类选择器时,为了限定某类元素,也可以在类选择器名前加上元素名,即将选择器名写成:元素名.类选择器名。</p>
<p>
伪类选择器说明:当选择器是类选择器时,为了限定某类元素,也可以在类选择器名前加上元素名,即将选择器名写成:元素名.类选择器名。
</p>
<p>层叠样式表(Casading Style Sheet)是一种格式化网页的标准方式,用于设置网页的样式,并允许样式信息与网页内容分离的一种技术。</p>
<p>元素选择器是最常用的一种选择器,元素选择器声明了网页中所有相同元素的显示效果</p>
</body>
</html>