[html] 学习笔记-CSS入门基本知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html] 学习笔记-CSS入门基本知识相关的知识，希望对你有一定的参考价值。
1、CSS概述
CSS指层叠样式表
CSS样式表极大的提高了工作效率
1）CSS基础语法：
selector{
propery:value
}
例1：h1{color:red;font-size:14px;}
属性大于1个之后，属性之间用分号隔开；如果大于1个单词，需要加上引号：p{font-family:"sans serif";}
2）CSS高级语法
选择器分组：h1,h2,h3,h4,h5,h6{color:red;}
继承：body{
color:green;
}
例子：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="1.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <h1> 10 这是一个h1标签的样式 11 </h1> 12 <h2> 13 这是一个h2标签的样式 14 </h2> 15 <a> 16 这是一个a标签的样式 17 </a> 18 <h3> 19 这是一个h3标签的样式 20 </h3> 21 </body> 22 </html>
其中的1.css：
1 h1, a, h2{ 2 color:blue;font-size:50px; 3 } 4 body{ 5 color:red; 6 }
2、CSS派生选择器
派生选择器：通过依据元素在其位置的上下文关系来定义样式
1 <body> 2 <p><strong>p标签:hello css</strong></p> 3 <ul> 4 <li><strong>li标签：hello css</strong></li> 5 </ul> 6 </body>
对应css文件：
1 li strong{ 2 color:blue; 3 } 4 strong{ 5 color:chartreuse; 6 }
3、CSS id选择器
Id选择器可以为标有id的html元素指定特有的样式，id选择器用“#”来定义
目前比较常用的方式是用id选择器来建立派生选择器
<body> <a>普通的a标签</a> <p id="pid">hello css<a href="www.jikexueyuan.com">pid中的a标签</a> </p> </body>
对于的css文件：
1 #pid{ 2 color:chartreuse; 3 } 4 #pid a{ 5 color:brown; 6 }
4、类选择器
类选择器以一个点显示
class也可以用作派生选择器
1 <body> 2 <p class="pclass">class 类型</p> 3 <p class="pclass"><a>这是一个class 类型中的a标签</a></p> 4 </body>
对于的css文件：
1 .pclass{ 2 color:red; 3 } 4 .pclass a{ 5 color:blue; 6 }
5、属性选择器
对带有指定属性的Html元素设定样式
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 [title]{ 8 color:blue; 9 } 10 [title=te]{ 11 color:rosybrown; 12 } 13 </style> 14 </head> 15 <body> 16 <p title="t">属性选择器</p> 17 <p title="te">属性和值选择器</p> 18 </body> 19 </html>
以上是关于[html] 学习笔记-CSS入门基本知识的主要内容，如果未能解决你的问题，请参考以下文章