css
css简介
css的作用
1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。
css的特性
1.继承性
2.层叠性
css的基本语法
基本语法
<style type="text/css">
选择器{
属性1:属性值；
属性2：属性值
。。。。。。
}
</style>
选择器
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类
类选择器
<head>
<title> New Document </title>
<style>
.p1{ color:red }
</style>
</head>
<body>
<p>查看文字内容</p>
<p>查看文字内容</p>
<p class="p1">查看文字内容</p>
<p>查看文字内容</p>
<p>查看文字内容</p>
</body>
id选择器
<head>
<title> New Document </title>
<style>
#p2{ font-size:100px;}
</style>
</head>
<body>
<p id="p2">查看文字内容</p>
<p>查看文字内容</p>
<p class="p1">查看文字内容</p>
<p>查看文字内容</p>
<p>查看文字内容</p>
</body>
标签选择器
<head>
<title> New Document </title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>查看css的效果</p>
<p>查看css的效果</p>
<p>查看css的效果</p>
</body>
包含选择器
<head>
<title> New Document </title>
<style>
ol ul li{font-size:50px; color:red}
</style>
</head>
<body>
<ol>
<li>zhangsan
<li>23
<ul>
<li>lisi
</ul>
</ol>
</body>
通配符选择器
- {
}
选择所有标签
伪类
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中的hover 和active 可以用于其他控价
<html>
<head>
<title> New Document </title>
<style>
a:hover{font-size:50px;}
</style>
</head>
<body>
<a href="#">我的链接</a>
</body>
选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器
子选择器 div >p
div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}
相邻选择器
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p
之间隔着一个元素 那是选不中的
}
相邻所有选择器 div ~p
div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}
属性选择器 input[type=“password”]
a[title] {
意思是选中 a标签 里面只要有 title 这个属性的 都会选中
}
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中
比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值 包含num的都能选中 例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>
过滤选择器(伪类选择器)
过滤选择器
last-child p:last-child 选择属于其父元素最后一个子元素 <p> 元素。
:not(selector) li:not(#my) 选择id不是my的所有li元素。
::selection 当鼠标左键选中文本时 这里注意是两个冒号 前面不加任何标签
:root 选择文档的根元素。 跟* 这个选择器很相似
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
例如<p></p> 这里面没有任何子标签和文本 就会被选中
