CSS 笔记1 css选择器
CSS全称是Cascading Style Sheet,层叠样式表。用于控制页面样式与布局,并允许样式信息与网页内容相分离的一种标记性语言。
引入CSS方法
1.内联引入方法:直接在HTML标签内添加样式
<p style="color:red;">改变字体颜色</p>
2.内部引入方法
在HTML 中添加style样式
<style>
p{
color:red;
font-size:20px;
}
</style>
3.外部引入方法
在HTML文档外部新建一个以.css为后缀名的CSS样式表,在HTML文档的<head>部分以<link type="text/css" rel="stylesheet" href="url">标签进行引入
三大选择器:元素选择器、类选择器、ID选择器
1.元素选择器是针对标签元素如:p、a、ul等标签设置的样式,直接以标签名字定义
如:p{ color : red;}
2.类选择器是针对不同元素需要使用相同样式时的一种样式设置方法,以 点+类名 定义
如:.myText{ color : red;} 调用时:<p class="myText">文字</p>
3.ID选择器是针对某个需要单独操作的标签进行的样式设置方法,ID属性值是唯一的。以 #+ID名 定义
如:#myText{ color : red;} 调用时:<p id="myText" >文字<p>
其他选择器:集体选择器、属性选择器、后代选择器
1.集体选择器:当多个元素都采用同一种样式属性的时候,用集体选择器就会方便很多,元素之间用逗号隔开
li,.mytext,span,a{ color : red; }
2.属性选择器:可以根据元素的属性和属性值来设置样式。
img[alt]{ border : 3px; } 所有拥有alt属性的img标签都有3个像素宽的边框
img[alt="image"]{ border : 5px; } 对alt属性的值为image的元素重新设置了样式,设置它的边框为5个像素
3.后代选择器:又叫包含选择器,可以用于作为某元素后代的元素。
h1 em{ color : red; } 只对h1元素中的em元素应用样式
div .sidebar{ color : red; } 对div中类名为 sidebar 的元素应用样式,可以好多层套下去
4.子元素选择器:只能选择作为某元素子元素的元素。
如:h1 > strong{ color : red; } 以下第一个子级会变颜色,第二个不会
<h1>这是<strong>子级</strong>关系</h1>
<h1>这是<em>子级和<strong>后代</strong></strong></em>关系<h1>
5.相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者具有相同的父元素。
h1+p{ color : red; } 选择紧接在h1元素后出现的段落,h1和p元素拥有共同的元素
<style>
html>body div+span,html>body hr+ul li{ color : red; }
</style>
从<html>元素中找到一个叫做<body>的子元素,并且在<body>元素中找到所有后代为<div>的元素,接着从<div>元素的同级后面找到元素名为<span>的元素,第二个选择器声明解释相同。
<style>