这篇博客详细介绍了CSS的学习，特别是选择器的掌握，包括：行内样式、内部样式和外部样式的编写方式及其优缺点。还深入讲解了CSS选择器的类型，如通用选择器、元素选择器、ID选择器、类选择器、伪类选择器、属性选择器，并给出了作业示例，强调了外部样式在项目中的重要性。
CSS
一、Css选择器—重点掌握
1. HTML创建页面内容
eg文字，段落，图片，超链接，表格，列表，表单
CSS（cascading style sheet级联样式清单）空置页面样式eg:大小，颜色，背景，位置，边框，阴影
2.css基础语法
属性名：属性值；
属性：值1 值2 …值n；
3.编写css的三种方式
（1）inline style:样式写在某个HTML元素里（style属性）--较少用
（2）inner style:样式写在HEAD里（<style></style>）--项目首页常用
（3）outer style:样式写在独立css文件里，首页文件引入（link标签）--通常用于123级页面
作用范围： inline style< inner style< outer style
（1 外部样式作用范围大，但会增加页面请求次数，从而拖累页面性能
（2 样式的优先级：！inportant>行内元素>内部样式=外部样式>浏览器默认样式
（3 <style>和<link>标签用于声明样式时，必须放在<head>里面，避免页面重绘
（1）行内样式/内联样式
语法<h1 style=‘样式声明’></h1>
（2）内部样式 inner style
在网页的头部<head>标签中增加一堆<style></style>标签
在该标签里面可以定义网页的所有样式
语法：
<head>
<meta charset="utf-8">
<title></title>
<style>
选择器{
样式列表;
}
</style>
</head>
样式规则
由选择器和样式声明的列表组成
就是把很多少声明好的样式，匹配给页面中的元素
特点：
需要通过选择器查找元素，嵌入在html文件中，影响html的大小
只能在当前页面重用
优先级低于内联样式
多用于测试和学习
选择器
CSS选择器（selector）
用于内部或外部样式中，声明接下来的样式作用于哪些或哪个元素
选择器{
属性名:属性值;
}
CSS提供了如下几种选择器:
①通用选择器
*{ } //*通配符的意思
②元素选择器
选中某个特定的HTML元素
元素名{ }
③群组选择器
一次使用多个选择器，选中多个HTML元素（用英文逗号分开）
p,h5{ }
④ID选择器
选中某一个元素（伪元素设定样式时，少用ID，因为ID常用于为元素绑定JS事件）
#id{ }
⑤类选择器☆重点
选择某一个或某几个元素
.danger{ }
<div class="danger"></div>
可以同时声明多个class的值
<div class="su1 su2"></div>
⑥伪类选择器
“假的类”类名是规定的，不能自定义，表示选中某个时刻/状态
:link{} 选中"超链接未被访问过"的状态
:hover{} 选中"超链接/普通元素 鼠标悬停上方"的状态
:active{} 选中"超链接/按钮 等元素被激活"的状态
:visited{} 选中"超链接被访问过后"的状态
:foucs{} 选中"获得了输入焦点的输入框"
提示，如果希望看到超链接四个状态的改变，必须按照顺序指定样式
1 link 2 visted 3 hover 4 active
⑦属性选择器
通过属性或者属性=值 来选择具体的HTML元素
[readonly]{} 只读
[name="upwd"]
day01作业
交的作业及效果
⑧并列选择器
元素名其他选择器
span.s2{}
<span class="s2">我是span2</span>
<span>我是span1</span>
<p class="s2">我是一个p元素</p>
（3）外部样式
1.在外部单独创建一个CSS文件 *.css
2.在html的head中，使用link引入该CSS文件*.css
3.将style标签中的内容，放在一个单独的CSS文件(.css)
4.<link href="文件位置/名字">
这样就可以实现多个页面代码复用
项目中，基本都使用外部样式
⑨后代选择器
选中某个元素的儿子，孙子，重孙子...元素
div span{}
⑩子代选择器
选择元素下面的直接儿子元素
div > span
⑪兄弟选择器
选择元素后面的所有兄弟元素 不要前面的兄弟，也不选子代
p ~ span
⑫相邻兄弟选择器
选择元素后面紧跟着的相邻兄弟
p + span
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
