CSS样式详解
本文全面解析CSS，包括内联式、嵌入式及外部样式表的使用，深入探讨选择器如类、ID、子选择器及伪类的选择机制，通过实例展示如何应用样式提升网页视觉效果。
认识CSS、CSS3种使用方式，css主要是用来定义样式字体大小颜色等样
认识css
css语法：
举例说明：这些都属于css
<style type="text/css">
p{color: red;font-size: 36px;}
input {background: palevioletred ; color: #008000;}
b{color: green; }
</style>
css注释：
下面来简单写一下：
css基础知识
第一种：内联式css样式p 标签选择器，
<div style="font-size: 36px;">今天晚上打麻将输了，明天去钓鱼</div>
直接定义字体大小，运行结果如图：
第二种：嵌入式css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style type="text/css">
p{color: red;font-size: 36px;}
input {background: palevioletred ; color: #008000;}
b{color: green; }
table{
width: 100%;
text-align: center;
}
</style></strong></span>
</head>
<body>
<p>今天晚上吃牛排，吃完后去打麻将</p>
账号：<input type="text" name="userID" /><br />
密码：<input type="password" name="pw" /><br />
<hr />
<b>认真听课，别打麻将了，也别讨论了 </b>
<br />
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1001</td>
<td>华安</td>
<td>男</td>
</tr>
<tr>
<td>1001</td>
<td>华安</td>
<td>男</td>
</tr>
<tr>
<td>1001</td>
<td>华安</td>
<td>男</td>
</tr>
</table>
</body>
</html>
运行结果如下：
第三种：外部css样式
需要独立写一个css文件，例如如下main.css文件，这个文件里面的内容如下
@charset "utf-8";
body{background:whitesmoke;font-size: large;}
然后在html文件下面引用：一般情况下位于head便签里面，语法规范，用来渲染页面的，按照渲染顺序来完成的，rel="stylesheet" type="text/css"这两个是固定写法的,是规则，必须要加上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--外部css样式:一般情况下位于head便签里面，语法规范，用来渲染页面的，按照渲染顺序来完成的
rel="stylesheet" type="text/css"这两个是固定写法的,是规则，必须要加上
-->
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>今天晚上吃牛排，吃完后去打麻将</p>
<hr />
账号：<input type="text" name="userID" /><br />
密码：<input type="password" name="pw" /><br />
<hr />
<b>认真听课，别打麻将了，也别讨论了 </b>
<br />
</body>
</html>
运行结果如下：
注意三个选择器：优先级 内联>嵌入>外部
css选择器介绍
每一条css样式声明（定义）有两部分组成， 选择器{ 样式 }
标签选择器
table p input 这些都属于标签选择器
-
p{color: red;font-size: 36px;} -
input {background: palevioletred ; color: #008000;} -
b{color: green; }
类选择器
允许以一种独立于文档元素的方式来指定样式。经常用到
CSS 类选择器：以 . 开头
- 类选择器允许以一种独立于文档元素的方式来指定样式。
- 该选择器可以单独使用，也可以与其他元素结合使用。
实例： .p1 .p2 都属于类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{text-align: center;}
.pl{font-family: arial; font-size: 24px; color: red;}
.p2{font-family: helvetica;font-size: 36px; color: yellowgreen;}
</style>
</head>
<body>
<p class="p2">春天不洗澡，处处蚊子咬。</p>
<p class="pl">夜来风雨声，花落知多少。</p>
</body>
</html>
id选择器
以#开头的，id选择器优先于类选择器
<style>
#p3{font-family:"arial narrow"; font-size: medium;}
#p4{background: darkred;font-size: large;}
</style>
<body>
<p id=p3>二次元社区惊现黑马，第一弹破千万流量或成下一家“B站”？</p><br />
<p id=p4>二次元社区霸主轮回，谁能保证笑到最后？日前AcFun被“老铁”快手收购，
交易价格预计在10.36亿元左右，“土味二次元”的新颖组合一时间震惊业界。
一度曾为二次元领跑者的A站最终被“小弟”赶超并远远的超越。</p>
</body>
运行结果如下：
类和ID选择器的区别
id选择器，一个便签上只能使用1个，
子选择器
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{text-align: center;}
div>div>p{color: royalblue;font-size: large;}
div>p{color: red;font-size: large;}
</style>
</head>
<body>
<div>
<p>夕阳</p>
<hr />
<p>童年最喜欢夕阳</p>
<p>它意味着一天枯燥的学习结束</p>
<p>它意味着可以自由自在的捉迷藏</p>
<p>或呆呆的坐在门槛上</p>
<p>数飞鸟数蚂蚁</p>
<p>数口袋的玻璃弹珠</p>
<div>作者：明续
<p>数口袋的玻璃弹珠</p>
</div>
</div>
<div>时间的秘密
</div>
</body>
</html>
运行结果：
例子二： 用空格，指定后辈元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.table{
width: 100%;
text-align: center;
background: green;
color: black;
font-size: large;
}
.table tr th{background:red;}
.table tr td{background: yellow;}
</style>
</head>
<body>
<table cellspacing="5" class=table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<th>1001</th>
<th>华安</th>
<th>男</th>
</tr>
<tr>
<th>1002</th>
<th>小明</th>
<th>男</th>
</tr>
<tr>
<th>1003</th>
<th>小张</th>
<th>女</th>
</tr>
</table>
</body>
</html>
通用选择器，
就是一个* 星号，用的比较少
*{background: palegoldenrod;}
伪类选择器
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{text-align: center;background: darkgrey;}
/*让li显示在一行inline表示一行*/
.nav li{display: inline;}
.nav a:link{text-decoration: none;}/*正常的连接去掉下划线*/
a{font-size: 24px;}
a:hover{font-size:40px ;color:red}/*鼠标放上去的样式,字体变大，颜色变红*/
a:active{background:purple;}/*选择链接的样式*/
a:visited{background: black;color: white;}/*已经访问过链接的样式*/
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="http:www.baidu.com">联系我们</a></li>
</ul>
</body>
</html>
如图：
分组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{text-align: center;}
/*让li显示在一行inline表示一行*/
.nav li{display: inline;}
.nav a{text-decoration: none; font-size: 16px;color: royalblue;font-family: "黑体"; margin-left: 50px; padding: 10px;}/*正常的连接去掉下划线*/
.nav a:hover{font-size: 20px;color: brown;background: yellow;font-weight: bold;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="http:www.baidu.com">联系我们</a></li>
</ul>
</body>
</html>
运行：
版权声明：本文为博主原创文章，转载请附上博文链接！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
