认识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>
运行: