本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！CSS样式类的讲解（附实例）
收藏CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<div>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
所有的主流浏览器均支持层叠样式表
div和span的理解
-
div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
-
span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;
类选择器
使用类选择器前要对世纪文档做标记，才能发挥类选择器作用。
.name{text-align:center}
在文档后面的部分，通过包含与样式相关的'class'属性，且将其中一个预定义的样式指定为'name'值，就一块明确选择要对该标签的特定情况用何种样式
<p class=name>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .sheen{font-size: large;color: salmon} </style> </head> <body> <div> Sie sprechen gut Deutsch. </div> <div> Was machen Sie hier in Berlin?Arbeiten Sie hire? </div> <div> Nein,ich studiere. </div> </body> </html>
ID选择器
ID 选择器类似于类选择器，ID 选择器前面有一个 # 号 – 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。
ID是唯一标识，只能被使用一次
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style> #sheen{font-size: x-large;color: rosybrown} #star{font-size: large;color: #c0ffff} #clotho{font-size: xx-large;color: darkgreen} </style> </head> <body> <div id="sheen"> Sheen:Sie sprechen gut Deutsch. </div> <div id="star"> Star:Was machen Sie hier in Berlin?Arbeiten Sie hire? </div> <div id="clotho"> Clotho:Nein,ich studiere. </div> </body> </html>
标签选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center} </style> </head> <body> <h3>使用CSS</h3> <div> 类选择器 </div> <div>ID选择器</div> <div>标签选择器</div> </body> </html>
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link – 普通的、未被访问的链接
a:visited – 用户已访问的链接
a:hover – 鼠标指针位于链接的上方
a:active – 链接被点击的时刻
CSS样式的引入
引入方式:
1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.
三种引入方式的优先级: 就近原则
//CSS文件 div { width: 80%; margin: 0 auto; padding: 0; } ul { list-style-type: none } li { display: inline-block; width: 20%; background: snow; color: #333333; padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: large; text-transform: capitalize; } li:hover { background: green; color: snow; } a:hover { color: snow; }
<!--HTML文件--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> li { background: red; } </style> <link rel="stylesheet" href="css/main.css"> </head> <body> <div> <ul> <li style="background: blue"> <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a> </li> <li>CSS</li> <li>JS</li> <li>python</li> </ul> </div> </body> </html>
更多 推荐文章
- 04-17中国首个东盟电子商务平台“美丽湾”启动
- 04-16电商下乡，京东、苏宁、阿里农村遭遇战打响？
- 04-16买房还是炒股，2015年买房无法拒绝的5大理由
- 04-161季度多家房企利润跌幅超50% 去库存促销战打响
