CSS基本语法
CSS样式
内联样式(行内样式)
当行代码设置属性
存在单属性和多属性
<body style="color:red; border:3px double red;">
页内样式
当先页面设置属性
<style>
body {
color:red;
}
</style>
外部样式
在单独的css文件中书写,用link标签来引用
当前html文件内写
<link rel="stylesheet" herf="css/index.css">//路径
样式优先级(就近原则):行内样式>页内样式>外部样式
CSS选择器
CSS标签选择器
标签选择器:直接通过标签名获取
<div>标签选择器测试</div>
<style>
//直接通过标签名获取到修改样式.直接写名字
div {
color:red;
}
</style>
CSS类选择器
每个标签都有个class属性,可以自定义名称.通过.类名访问(示例中的zhulei类名)
<div class="zhulei">自定义类标签</div>
<p class="zhulei">自定义类标签</p>
<style>
//直接通过标签类名获取到修改样式,这样一类都统一修改.直接写类名字
.zhulei {
color:red;
}
</style>
CSS id选择器
id选择器:注意id唯一,但是弱语言,语法不允许,虽然报错,不会出现问题.但是一定是错误的
<p id="zhulei">自定义类标签</p>
<style>
//直接通过标签id名获取到修改样式,这种是唯一一个标签.直接写类名字
#zhulei {
color:red;
}
</style>
CSS 并列选择器(或者):直接叫或选择器
text id选择器或者text1 类选择器(多个,号),通过逗号连接
<div id="text">并列选择器测试text</div>
<div class="text1">并列选择器测试text1</div>
#text,.text1 {
color:red;
}
CSS 复合选择器(并且):直接叫且选择器
text id选择器并且text1 类选择器,复合选择器不要留空格,不然会出问题
<div id="text">复合选择器测试</div>
<div class="text1">并列选择器测试text1</div>
#text.text1 {
color:red;
}
CSS 后代选择器(子控件)
- 后代选择器:子标签,语法父标签写前面,空格写子控件.
- 直接后代选择器:直接子标签受影响,非直接子标签不受影响.
- 相邻兄弟选择器:直接理解字面意思,手心手背都是肉,前后相邻不影响
//后代选择器
<div>
<p>后代选择器测试标签</p>
</div>
div p {
//div内的所有p子标签都影响
color:red;
}
-------------------------------------------------------------------
//直接后台选择器
<div>
<p>直接后代选择器测试标签</p>
<div>
<p>非直接后代选择器测试标签</p>
</div>
</div>
div > p {
//div内的一级p标签直接子标签受影响,非直接子标签不受影响.
color:red;
}
-------------------------------------------------------------------
相邻兄弟选择器:示例的意思是div相邻的p
div + p {
}
CSS 属性选择器
<div name="jack">jack属性选择器</div>
<div name="race">jack属性选择器</div>
<div age="23">jack属性选择器</div>
//表示含有name属性的标签都受影响
div[name] {
color:red;
}
//表示含有name属性且age属性的标签才受影响
div[name][age] {
color:red;
}
//表示含有name属性的标签且name属性为jack都受影响
div[name = "jack"] {
color:red;
}
CSS伪类
伪类:简单介绍就是给标签特定状态设置样式(比如输入框获取焦点等)
//比如点击状态下更改状态
input:focus {
}
//鼠标停留的属性
input:hover {
}
<input placeholder="测试伪类">
//需求:输入这一刻就改变输入框状态input在focus状态下的属性设置.
input:focus {
}
选择器优先级
选择器优先级:比如通过两种选择器都改变了一个标签谁的优先级高呢?
- 介绍一个优先级最低的选择器:通配符
* {
color:red;
}
css选择器优先级规律:
不同类型的选择器遵循:
相同类型的选择器遵循:就近原则,叠加原则.(规律:范围定义越小,优先级越高,直接查询优先级数值都有对应的数字代表优先级).
important > 行内 > id选择器 > 类选择器(属性|伪类|伪元素) >标签选择器 > 通配符
复习:css中有多少选择器,语法,名称,以及意义??
