认识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>
![](https://i-blog.csdnimg.cn/blog_migrate/69b3d79571c63ae90d81c79b126d0aa5.png)
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>
运行结果:
![](https://i-blog.csdnimg.cn/blog_migrate/a9551d570f7dae5efef4c277446bd5e4.png)
例子二: 用空格,指定后辈元素
<!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>
![](https://i-blog.csdnimg.cn/blog_migrate/d95620c91538c2e577b24d85a15d5cb5.png)
通用选择器,
就是一个* 星号,用的比较少
*{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>
运行: