这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、基本概念
- 功能：定义页面元素的样式
- 组成部分：选择器Selector 属性Property,属性值Value;
- 使用方式：
- 外链：使用link,引入外部css文件
- 嵌入：写在style标签里
- 内联 ：样式写在style里面
- 一些例子：
- 对于属性选择器： a[href^="#]表示a标签的href与#开头就匹配上
二、选择器
- 基本选择器
- 标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: orange;
background: blue;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>
- 类选择器:class：选择所有class一致的标签，跨标签，格式：.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo1{
color: blue;
}
.demo2{
color: red;
}
.demo3{
color: aqua;
}
</style>
</head>
<body>
<h1 class = "demo1">类选择器：demo1</h1>
<h1 class="demo2">类选择器：demo2</h1>
<h1 class="demo3">类选择器：demo3</h1>
</body>
</html>
- id 选择器：全局唯一，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo1{
color: aqua;
}
.demo2{
color: red;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1">id选择器：demo1</h1>
<h1 class="demo2" id = "demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>
</html>
- 层次选择器
- 后代选择器：在某个元素的后面
- 子选择器，一代
- 相邻的兄弟选择器 同辈
- 通用选择器
- 伪类选择器
- 定义：不基于标签和属性定位元素
- 分类：
- 状态伪类：某个标签处在不同状态的样式
a:link{
color:black;
}
- 结构性伪类：根据节点在dom树出现的位置
li:first-child{
color:red;
}
- 组合方式：（见图片）
- 属性选择器
- id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: block;
height: 50px;
width: 50px;
float:left;
border-radius: 10px;
background: blue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（正则）
=表示绝对等于
*=表示包含
^=表示以...开头
$=表示以...结尾
存在id属性的元素 a[]{}
*/
/* a[id]{
background: red;
}*/
/*id=first的元素*/
/* a[id=first]{
background: aqua;
}*/
/*class中有links元素*/
/* a[class = "links item2 first2"]{
background: orange;
}*/
/*a[class*="links"]{
background: black ;
}*/
/*选中href中以http开头的元素*/
a[href^="http"]{
background: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="/adad/faf" class="links item2 first2" >2</a>
<a href="qwe123" class="links item3 first3" >3</a>
<a href="eweqe" class="links item4 first4" >4</a>
<a href="rrrrr" class="links item5 first5" >5</a>
<a href="ttt" class="links item6 first6" >6</a>
<a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
三、课后个人总结
如果说html是房子的户型，那么css就是房子的装饰、布局。通过它可以使房子变得更加漂亮。CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。一条CSS样式规则由两个部分构成：选择器和以{ }包裹的一条或多条声明。例如：h1{color:blue;}.CSS的样式设计依赖于对应的html代码，它通过html代码得以展现在页面上。通过实际的页面编写，写一段代码后就进行浏览器的测试，同时用IE6与FF一起测试。在浏览器中调 试，调试时发现许多之前没有预料的问题，如浏览器的兼容问题、浮动的问题等。不断找出样式中存在的问题，不断修正样式，调整样式，然后再进行测试，是我做页面时的主要体会。总之，熟练的掌握css,可以大幅度提高页面设计的美观性，CSS的学习对于我们设计页面是是十分重要的。
