一. CSS 引入方式
1. 行内式 (不推荐使用):
直接在标签里面加 style-CSS 样式, 这样是可以添加, 但是会出现很同样标签, 所以一般不推荐
和使用这样的方式去添加 CSS 样式.
使用方法: <p style="color:green"> 这里放设置文本 </p> 直接在标签属性添加 style-CSS 样式
2. 内接样式 (页面较小的时候使用哟 ***):
内接样式是针对页面比较小的情况, 才会使用.
使用方法: 就可以直接在 head 标签里面添加:<style> 直接在这里写 cass 样式 </style>
3. 外接样式:
(1) 链接式 ***
这个是常用的方式, 链接式一般都是会另外写一个文件, 然后通过 link 样式文件进来.
使用方法:<link rel="stylesheet" href="这里放 cass 文件">
(2) 导入式
同样也是另外写 CSS 文件然后导入, 不建议使用, 因为页面 CSS 加载不出来时候, 会显示 html 的页面, 有加载延迟
导入式是使用方法: @import url("这里放 css 文件")
二. 选择器
*** 注意点: CSS 优先级, 指的是浏览器加载 cass 样式的先后顺序 ***
1. 基本选择器
(1) 标签选择器
直接使用标签名来做选择器, 而不是在另外设置属性, 调用属性的 ( 值 )
使用方法: 直接标签来写在里面, 任何标签都是可以找到的.
- <style>
- p{
- color:blue;
- }
- </style>
(2) 类选择器 ***
在标签属性里面设置: <div class="这里就是要用来设置 css 的值: aaa"> 这里放你要修饰的值 </div>
使用方法: 类选择器前面要加 .+ 值 { }
- <style>
- .aaa{
- color: #fff;
- }
- </style>
*** 类选择器可以优化: 优化方式: 如果你要修饰的 模块 或 标签 都有同的 CSS 样式 , 那么
就可以写在同一个样式, 同时调用一个样式就可以, 减少代码.
- # CSS 样式
- .lv{
- color: green;
- }
- .big{
- font-size: 40px;
- }
- .line{
- text-decoration: underline;
- }
- # HTML 内容 : 公共类 共有的属性
- <div>
- <p class="lv big"> 段落 1</p>
- <p class="lv line"> 段落 2</p>
- <p class="line big"> 段落 3</p>
- </div>
*** 这样的话就会减少写了一般打代码
(3) id 选择器
页面里面 id 是唯一的, 给模块, 标签等只要设置 id 选择器 无论是在哪里都是可以直接调用
的 但是 id 往往最好留给 JS 使用, 除非特殊情况, 所以推荐使用类选择器哟.
使用方法: <p id="aaa"> 这里要修饰的值 </p> id 调用的话前面必须使用 # 列如: #aaa{ }
*** 这里要注意选择器的权重是: id :100 --> class :10 标签 : 1 所以优先级判断就是谁权重大 谁就获得
修饰权优先.
2. 高级选择器
- <div class="father">
- yuan
- <p class="box1">
- egon
- <span class="sun">alex</span>
- </p>
- </div>
- <span>wusir</span>
(1) 后代选择器 (中间要加个空格)
这里使用的是就是 从父亲 -> 儿子 -> 孙子的一个过程就是后代选择器
一定要用到 span 才算是后代哟.
使用方法:
- .father .box1 span{
- /*21*/(这里就是它权重哟)
- color:green;
- }
(2) 子代选择器 (要加上:> 这个符号 )
这里只用到他的儿子, 所以这种类型就是子代选择器
使用方法:
- .father>.box1{
- color:red;
- }
注意: 设置后, 后代也会随着子代改变颜色的哟
(3) 并集选择器 ( 要加 , 逗号就是 or 的意思)
多个选择器用 , (逗号) 在中间隔开, 不然没有效果, 一般有共性想才这么设置哟
使用方法:
- div,span{
- color: red;
- }
同时比如在开始建站的时候, 网页为更好是使用会设置是样式为例如百度:
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd
- , ul, ol, li, pre, form, fieldset, legend, button, input,
- textarea, th, td {
- margin: 0;
- padding: 0;
- }
(4) 交集选择器 ( 两个要连着写, 就是 and 的意思 )
交集选择器就是同时满足 同一个条件, 例如: <span class="sun">alex</span> 这个就是交集选择器
- span.sun{
- color: #ff6700;
- }
3. 属性选择器
- <p><label for="username"> 用户名:</label><input type="text" id="username"></p>
- <p><label for="pwd"> 密码:</label><input type="text" id="pwd"></p>
- 属性名称匹配 [key]
通过标签内的属性来设置 CSS 样式 选用是属性的时候要加上中括号:[ ]
使用方法:
- [for]{
- color:green;
- }
- 完整匹配 (key=val)
就是把属性和属性的值全部拿下来当时设置 CSS 样式
使用方法:
- [for='username']{
- color: red;
- }
- 以什么开头 (key^=val)
把属性和属性的值全部都拿来设置, 但是在属性后面加上 ^
使用方法:
- [for^='pw']{
- color: green;
- }
- 以什么结尾 (key$=val)
把属性和属性的值全部都拿来设置, 但是在属性后面加上 $
使用方法
- [for$="e"]{
- color: blue;
- }
- 包含什么 (key*=val)
把属性和属性的值全部都拿来设置, 但是在属性后面加上 *
使用方法:
- label[for*="nam"]{
- color: yellow;
- }
- - input[name=xxx]
使用标签里面的属性来 [name=xxx] 来设置他的 CSS 样式
4. 伪类选择器
要记住:"爱恨准则"
伪类选择器一般使用在 a 链接标签中
- <div class="box">
- <ul>
- <li class="item1"><a href="#"> 没有被访问 </a></li>
- <li class="item2"><a href=""> 访问过后 </a></li>
- <li class="item3"><a href=""> 鼠标悬停 </a></li>
- <li class="item4"><a href=""> 鼠标摁住 </a></li>
- </ul>
- </div>
(1) 没有访问的样式 :link (显示的颜色的)
在使用是时候 link 前面要加上 :
使用方法:
- .box ul li.item1 a:link {
- color: #666;
- }
(2) 访问过后的样式 :visited (显示颜色的)
使用方法:
- .box ul li.item2 a:visited {
- color: red;
- }
(3) 鼠标悬停的样式 :hover (鼠标悬停在上面显示的颜色) **** 这个是常用 ****
使用方法:
- .box ul li.item3 a:hover {
- color: green;
- }
(4) 鼠标按住的时候 :active (按住鼠标不动时候显示是颜色)
使用方法:
- .box ul li.item4 a:active {
- color: yellowgreen;
- }
5. 伪类元素选择器
- <body>
- <p>egon</p>
- </body>
- p:first-letter{
- color: red;
- font-size: 30px;
- }
- p:before{
- content:'alex';
- }
- p:after{
- content:'&';
- color: red;
- font-size: 40px;
- }
- .clearfix:after {
- content: '.';
- clear: both;
- display: block;
- height: 0;
- visibility: hidden;
- }
- - overflow:hidden (常用 ***)
来源: http://www.bubuko.com/infodetail-3099935.html