CSS
css选择器
属性操作(一)
属性操作(二)
css概念
一.CSS概述
CSS是Cascading Style Sheets,中文称为层叠样式表,对html标签的渲染和布局
CSS规则是由两个主要的部分构成:选择器,以及一条或多条声明
结构:
选择器 {
属性:值
属性:值
}
css四种引入方式
二.css四种引入方式 1.行内引入 2.内嵌式 3.链接式(推荐):可以增加开发效率 4.导入式 总结: 导入式会在整个网页加载后在加载css文件,导致的问题就是如果一个网页太大则会出现先显示无样式的页面,闪烁一下再出现网页的样式 链接式会以网页文件主题装载前加载css文件,因此显示出来的网页从一开式就是带效果的
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引入方式</title> <!--第二种嵌入式--> <style> body { margin: 0; background-color: black; } p { color: black; } </style> <!--第三种链接式--> <link rel="stylesheet" href="a.css"> <!--第四种导入式--> <style type="text/css"> @import "b.css"; </style> </head> <body> <!--第一种行内引入--> <p style="background-color:red; margin: 0;">你好</p> <p style="color: blue;margin:0">你好</p> <div> nihao </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
a.css
div {
background-color:green;
}
b.css
div {
color: aliceblue;
}
css选择器
一基本选择器
一。基础选择器
1.标签选择器
匹配所有p标签
p {color:red}
2.id选择器
匹配对应的id
#id{color:red}
3.class选择器
匹配一类
.class{color:red}
4.通配选择器
*{color:red}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> /*标签选择器*/ p { /*margin: 2px;*/ color:royalblue; background-color:beige; } /*id选择器*/ #p1 { margin: 0; color: red; font-family: 华文彩云; font-size: 40px; background-color: blue; } /*类选择器*/ .d1{ color: royalblue; } /*通配符选择器*/ *{ margin: 0; background-color: yellow; } </style> </head> <body> <p>这是一个p标签</p> <p id="p1" align="center">通过id找p</p> <div class="d1"> <div> <span>span的内容</span> </div> </div> <p class="d1">p的内容</p> </body> </html>
二组合选择器
二。组合选择器
1.后代选择器(不分层级,只让P变色)
2.子代选择器(只在儿子层找)
3.毗邻选择器(紧挨着下面一个,找相邻的,找下面,不着上面)
4.兄弟选择器(同一级别,都找)
5.多元素选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*div后代只要有p都会找*/ /*div p {*/ /*color:royalblue;*/ /*background-color: rosybrown;*/ /*font-size: 30px;*/ /*}*/ /*类名为a1的后代p标签*/ /*.a1 p{*/ /*margin: 0;*/ /*}*/ /*子代选择器 类名为a1子代p标签*/ /*.a1>p{*/ /*font-family: 华文彩云;*/ /*}*/ /*兄弟选择器 全部都找*/ .a1~p{ font-size: 20px; color: royalblue; } /*毗邻选择器 只会向下找第一个*/ /*.a3+p{*/ /*font-family: 华文彩云;*/ /*}*/ /*多元素选择器*/ /*选中类名a1的和p标签*/ .a1 ,p{ font-size: 20px; } </style> </head> <body> <p>pppp</p> <div class="a1"> <p>这是第一个div 第一个p标签</p> <span>你好</span> <div class="a2"> <p>p标签</p> <div class="a3"> <span>这是第一个 div div div的span标签</span> </div> <p>这是第一个div div 第二个p标签</p> <p>这是第一个div div 第三个p标签</p> <p>div p第二个p标签</p> </div> </div> <div class="a1"> <div class="a2"> <span>这是第二个div div span标签</span> </div> <p>这是第二个 div 第一个p标签</p> <p>这是第二个 div 第二个p标签</p> </div> <p>外面的p表片</p> </body> </html>
三伪类选择器
1.a:link
设置还没有点击的链接的颜色
2.a:visited
点击过后的颜色设置
3.a:hover
鼠标放上链接的颜色
4.a:active
鼠标点下去的那一刻的颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a:link{ color: red; } a:visited{ color: black; } a:hover{ color: gray; } a:active{ color: royalblue; } p:before{ content:"hello"; /*color:red;*/ } p:after{ content: 'haha'; } p:first-letter{ color: red; font-size:40px; text-transform: uppercase; } </style> </head> <body> <p>d你好</p> <a href="">点我</a><br> </body> </html>
继承和属性选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> /*体现了继承如果不写其他标签的css,则会继承body的属性*/ body { background-color:yellow; color: royalblue; } /*属性选择器*/ p[title]{ color: red; } </style> </head> <body> <p title="222">hello</p> <p title="2">world</p> </body> </html>
选择的优先级:
标签选择器>id选择器>类选择器>通配选择器>组合选择器(选择器越模糊,优先级越低)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> #i1 { background-color: blue; } /*div {*/ /*background-color: red;*/ /*}*/ </style> </head> <body> <div id="i1"> <div id="2"> <span>你好</span> </div> </div> <div id="3"> <div id="4"> <span>你好</span> </div> </div> </body> </html>
标准文档流
标准文档流
1.空白折叠现象
解决办法:在写的时候紧贴着写,不要有空格
2.不同类型的行内元素对准的基线不一样
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标准文档流</title> <style> div { background-color: royalblue; color: white; } </style> </head> <body> <div> <span>你好</span><span>你好</span> <span>你好</span> </div> </body> </html>
CSS属性介绍
字体属性
字体属性
1.文字字体
font-famlily浏览器会支持多种字体,依次往后使用
2.字体大小
font-size: 14px;
3.字体粗细
font-weight
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
4.字体颜色(3种方法)
color:颜色的名称|rgb()元组|rgba(a是透明度)|十六进制数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性</title> <style> span { font-family: 隶书; font-size: 40px; font-weight: lighter; color: rgba(255,0,0,0.3); } </style> </head> <body> <span>你好</span> </body> </html>
文本属性
文本属性 1.文字对齐(必须在块内使用) text-align left 左边对齐 默认值 right 右对齐 center 居中对齐 justify 两端对齐 2.文字装饰 text-decoration 属性用来给文字添加特殊效果。 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。 <常用的为去掉a标签默认的自划线:> 3.首行缩进 text-indent: 32px;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性</title> <style> p { margin: 6px; font-family: 隶书; font-size: 40px; font-weight: lighter; color: rgba(255,0,0,0.3); text-align: center; } div { text-align: left; text-indent: 40px; } a { text-decoration: none; } </style> </head> <body> <p>你好</p> <div><span>hello</span></div> <a href="">点我</a> </body> </html>
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
简写:background:
#ffffff url('1.png') no-repeat right top;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景属性</title> <style> body { /*background-color: red;*/ background-image: url("1.jpg"); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="d1" >nihao</div> </body> </html>
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
display属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100px; height:100px; background-color: rebeccapurple; display: inline-block; } .c2{ width: 100px; height:100px; background-color: burlywood; } .c3{ width: 100px; height:100px; background-color: crimson; display: inline; } .c4{ width: 100px; height:100px; background-color: gray; } .s1{ display: block; width: 200px; height: 200px; background-color: royalblue; /*visibility: hidden;*/ //隐藏了其他的不会顶上去 /*display:none; //隐藏了其他的会顶上去*/ } </style> </head> <body> <div class="c4">普通行级div</div> <span class="s1">行内span转变为行级标签</span> <div class="c1">行级div年后行内块</div> <div class="c2">年后</div> <div class="c3">行级div年后变为行内</div> </body> </html>
display属性
行级标签--》行内标签:display:inline
行内标签--》行级标签:display:block
使元素同时具有行内元素和块级元素的特点。(行内块级):display:inline-block
display:"none"与visibility:hidden的区别:
visibility:hidden: (设置后不影响下面的标签)
可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: (设置后该标签直接去掉)
可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
css盒子模型
margin:调整两个标签的距离
border:内边距和内容外的边框
padding:内容和边框之间的距离
content:内容
float
float浮动:
三种方式:
left:向左浮动
right:向右浮动
none:默认值,不浮动
clear
clear清楚浮动: left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 #清楚浮动的三种方式: 固定高度:给父级标签设置height 伪元素清除法: .clearfix:after { content: ""; display: block; clear: both; } overflow:hidden
overflow溢出
overflow溢出属性:
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { max-width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html> 圆形头像示例
定位position
定位position:
static:默认
relative:相对定位(相对于该元素之前的位置进行定位),不需要设计父级标签有定位元素,只是相对于自身,不会塌陷,还是行级元素,而且其他元素还是在原来的位置
absolute:绝对定位(相对于父级元素定位过的去定位,没有直接找body),会使得该标签变成block级元素
fixed:固定
z-index
z-index:
谁大谁压着谁