CSS:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.
Css书写规则:
Css书写规则主要是由两部分组成:选择器和属性。
selector {
property: value;
property: value;
property: value
}
例:
h1 {font-family: Microsoft YaHei;background-color: lightseagreen;height: 24px;color: white;}
h1->就是选择器,选择的是HTML中的 h1 标签
中括号内的就是设置h1标签的属性.
Css的四种引入方式:
1、行内:将style当做一种属性来添加到文本中,这种体现不出css的优势,故不推荐。
<p style="background-color: rebeccapurple">Hello World</p>
2、嵌入:在head中为多种html样式编写属性。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3、导入:那如果我想多个html文档共享一个CSS的文本的话,就可以利用@import的方式。
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
4、链接:最后一种就是在head中利用link 添加href来引入css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
其中第三种和第四种分别是 Css 和 HTML两种方式
区别:
@import的模式是属于Css范畴,网页在加载的时候会加载完成html后再加载Css的内容,所以如果文档比较多的话,网页会出现闪烁。
link会在网页文件主体加载之前加载CSS文件,因此显示出的网页一开始就是带样式的效果,不会像导入式的那种先显示无样式的网页,然后显示有样式的网页,这是链式的优点。
选择器:
选择器是一种模式,用于选择需要添加样式的元素.
基本选择器:
通配选择器:所有标签
*{
margin = 0px;
}
- id 选择器,同一种ID选择器只能在HTML使用一次id
#red{
color:red;
}
- class选择器:多种标签对同一种的样式的使用
.tt {
color: dodgerblue;
font-size: 20px;
}
- 元素选择器 :
div.rr{
font-size: 100px;
}
- h1,h2都使用这一种样式
h1,h2{
font-size: 100px;
}
组合选择器:
组合选择器的应用场景就是当我们标签存在嵌套关系时,想要针对性的来将各个标签渲染,就需要用到组合选择器,在了解组合选择器之前,我们可以先了解一下标签嵌套。
1、块级标签可以嵌套内联标签和某些块级标签;
2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素;如:h1、h2、h3、h4、h5、h6、p、dt;
3、内联标签不可嵌套块级标签;
4、块级元素与块级元素并列、内嵌元素与内嵌元素并列
Ps:块级标签中的<p></p>不可嵌套其他块级标签,否则在查看源码的时候会出现差异。
又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
- 将div所嵌套中的 p 标签 渲染成黄色
div p{
color: yellow;
}
只渲染子元素的选择器 ,相比较后代选择器,渲染的范围只在下一层(儿子辈的)元素。
- 渲染h1子标签中的strong标签的颜色为红色
h1 > strong{
color:red;
}
- 渲染成功
<h1>
This is
<strong>very</strong>
<strong>very</strong>
important.
</h1>
- 这个就不会渲染h1标签下的 strong 内容
<h1>This is
<em>
really <strong>very</strong>
</em> important.
</h1>
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
- 两个相邻的li元素,且二者有同一父元素,渲染后一个li元素;
li + li {
font-weight:bold;
}
- 这两个列表中的tiem2和item3都会被加粗
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
兄弟选择器:
可选择在同一层级下的,在另一元素后的元素。
与相邻兄弟选择器一样,只是可以不相邻而已。
li~ li {
font-weight:bold;
}
属性选择器:
根据元素的属性及属性值来选择元素。
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
Css-优先级
在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗?
当我们给一个标签应用样式的时候,首先需要考虑的就是优先级。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
如果多个选择器对同一标签应用同一种属性的样式(color/font-size/width/height...)样式,那么该属性就会应用权重最高的那种选择器,如果是组合选择器的话,那么就将两个样式的权重相加取最高的和的组合选择器。
同样是对 p3进行渲染:
权重:10+10+10
.p1 .p2 .p3{
color:red;
}
权重:10
.p3{
color:green;
}
<div class="p1">
<div class="p2">
<p class="p3">PPP</p>
</div>
</div>
出现的效果就是PPP为红色,但是如果我们想就应用单独p3的样式(第二个),就用到了!important
.p3{
color:green!important;
}
这样出现的效果就是PPP为绿色
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突,则比较优先权。 4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。 5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
Css-属性
Color文本:颜色对照表
my_color{
color: #000; - 16进制
color: red; - 颜色单词
color: RGB(0,255,255); - RGB
color: RGBA(0,0,255,1); - RGBA
opacity:0.5; - 透明度
}
水平对其方式:text-algin
规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。
.text{
width: 550px;
height: 550px;
background-color:blue;
text-align: center; 把文本排列到中间。
text-align: justify; 实现两端对齐文本效果。
text-align: left; 把文本排列到左边。默认值:由浏览器决定。
text-align: right; 把文本排列到右边。
text-align: inherit; 从父元素继承 text-align 属性的值。
}
背景属性:
body{
background-color:yellow; -规定要使用的背景颜色。
background-image:url("gao.jpg"); -规定要使用的背景图像。
background-position:center(水平位置) center(垂直位置); -规定背景图像的位置。
background-size:80px(宽) 80px(高); -规定背景图片的尺寸。
background-repeat:no-repeat; -规定如何重复背景图像。
background-origin:content-box; -相对于内容框来定位。 -规定背景图片的定位区域。
border-box -相对于边框盒(外边框)定位。
padding-box -相对于内边距框来定位。(默认);
background-clip:content-box; -规定背景的绘制区域。
background-attachment: fixed; 背景不会随着滚动条滚动而滚动
scroll; 背景图片随着滚动条滚动而滚动 -规定背景图像是否固定或者随着页面的其余部分滚动。
当然,我们可能觉得一个个这样设置比较麻烦,我们也可以把这些属性写在一条属性里:
background: red url(bgimage.gif) no-repeat fixed top;
.border{
height: 100px;
width: 100px;
border-width: 3px; -规定边框的宽度
border-color: red; -规定边框的颜色。
border-style: solid; -规定边框的样式。
同样的也可以写在一条属性中:
border:red 3px solid;
而且四条边框都可以单独设置:
border-top-style:dotted; -上:虚线
border-right-style:solid; -右:实线
border-bottom-style:double; -下:双框
border-left-style:none; -左:无
}
list-style-type 设置列表项标记的类型,其中如果设置属性为none,则不显示每列的起始符号
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
简写:
ul
{
list-style:square inside url('/i/arrow.gif');
}
display属性: 属性规定元素应该生成的框的类型。
none | 此元素不会被显示。(隐藏) |
block | 此元素将显示为块级元素,此元素前后会带有换行符。注:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。会将块标签显示为内联元素,使内联元素显示为块级元素(同时也具备块/内联标签的一些特性) |
当给块级元素设置inline-block的时候,会让块级元素显示为内联元素(竖排边横排)但是每个标签之间却有空隙:
暂时可以把设置成inline-block的标签再装入另一个渲染id = “outer”的标签中就行了
#outer{
width:100% -这个是必须要设置的,因为块级元素内嵌块级元素的话,如果原尺寸宽度小于所内嵌元素的宽度,内嵌元素就会换行显示。这里设置成与浏览器同等宽度。
border: 3px dashed;
word-spacing: -5px; -字间距为-5px
}
Css-伪类:
伪类用于向某些选择器添加特殊的效果。
超链接:
a:link {color: red} /* 未访问的链接 */
a:visited {color: yellow} /* 已访问的链接 */
a:hover {color: green} /* 鼠标移动到链接上 */
a:active {color: blue} /* 选定的链接 */
before、after:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:after{
content:'world';
display: block;
color: red;
}
p:before{
content: 'Hello';
}
</style>
</head>
<body>
<p></p>
</body>
</html>
内外边距:
1、margin(外边距): 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
border: 3px solid yellow;
}
div{
width: 100px; -宽
height: 100px; -高
border:solid blue 3px; 边框属性
margin-top: 10px; -上框与其他元素的距离
margin-right: 10px; -右...
margin-bottom: 20px; -下...
margin-left: 10px; -左...
简:顺序是顺时针上右下左
margin:10px 10px 20px 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
注意:
边界重叠:我们设置了div的margin-top:10px、而margin-bottom:20px ,代码中两个<div>标签相挨着(兄弟标签)并且是上下挨着,那么margin的属性就会出现冲突,css会选择 数值大的做最终的值
边界塌陷(父子关系):如果父级div中没有border、padding、inline、content,子级div的margin会一直向上找,直到找到某个标签包括border、padding、inline、content中的其中一个,然后按此div 进行margin;
解决方法:在父级div选择器中添加 overflow: hidden;
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: rebeccapurple;
width: 300px;
height: 300px;
/*overflow: hidden;*/
}
.div2{
background-color: green;
width: 100px;
height: 100px;
margin-bottom: 40px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
2、padding(内边距/填充):用于控制内容与边框之间的距离,更改元素的padding,就是在原有的padding基础上填充像素,也相当于增大了元素的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
border: 3px solid yellow;
}
div.one{
width: 100px; -宽
height: 100px; -高
border: blue solid 3px; 边框
}
div.two{
width: 100px;
height: 100px;
border: lightseagreen solid 3px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
- 简写:上右下左
padding:10px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
float:
当元素被设置为浮动元素时,会先判断上一个元素是否为浮动,如果是浮动,则会紧贴上一个元素浮动,如不是,则与上个元素垂直距离不变。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
排列规则:
block:block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性;
inline:inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。inline元素设置width、height属性无效。
文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。(正常排列)
脱离文档流:将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。(float浮动时会将自己变为脱离文档流)
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
/*background-color:lightgreen;*/
}
.div1{
background-color: yellow;
width: 100px;
height: 100px;
float:left;
}
.div2{
border:blue solid 3px;
width: 50px;
height: 150px;
/*float:left;*/
}
.div3{
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
float:left;
}
.div4{
background-color: black;
width: 100px;
height: 100px;
margin: 10px;
float:left;
}
</style>
</head>
<body>
<div style="border: solid aqua 1px">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
坍塌现象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container{
border:1px solid blue;
}
.box1{
background-color:green;
float:left;
width:100px;
height:100px;
}
.box2{
background-color:yellow;
float:left;
width:100px;
height:100px;
}
.box3{
background-color:red;
height:40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</body>
</html>
解决方案除了设置container的行高,就用到了清除浮动这一属性。
规定元素的哪一侧不允许其他浮动元素。
left : 不允许左边有浮动对象。
right : 不允许右边有浮动对象。
both : 不允许有浮动对象。
解决方案:
在container和box3标签之间添加一个clear:both的标签就可以了,这里就利用到了伪类的after属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container{
border:1px solid blue;
/*height: 100px;*/
}
.box1{
background-color:green;
float:left;
width:100px;
height:100px;
}
.box2{
background-color:yellow;
float:left;
width:100px;
height:100px;
}
.box3{
background-color:red;
height:40px;
}
.container:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</body>
</html>
static:Position的默认值,没有定位,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
relative:生成相对定位的元素,相对于其文档流位置进行定位(不脱离文档流)
absolute:绝对定位,相对于 static 定位以外的第一个父元素进行定位(如果都没有定位属性,那么就到最上层的body),完全脱离文档流,元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed:绝对定位,相对于浏览器窗口定位,完全脱离文档流且不随着滚动条移动而移动。
以上元素除static以外都可根据元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.outet{
position: relative;
border: solid 3px yellow;
}
.item{
width: 100px;
height: 100px ;
color: white;
}
.r1{
background-color: blue;
}
.r2{
background-color: red;
/*position: relative;*/
position: absolute;
top: 100px;
left: 100px;
}
.r3{
background-color: darkgreen;
}
.r4{
background-color: lightseagreen;
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body style="height: 2000px;background-color:aquamarine">
<div class="item r1">r1</div>
<div class="outet">
<div class="item r2">r2</div>
<div class="item r3">r3</div>
<div class="item r4">r4</div>
</div>
</body>
</html>
模仿抽屉网head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
text-decoration: none;
font-size: 14px;
}
.head-band{
margin: 0px 0px 0px 0px;
width: 100%;
position: fixed;
}
.logo{
height: 23px;
width: 121px;
background: url("logo.png");
float: left;
margin-top: 11px;
}
.head-content{
/*border:solid red 3px;*/
width: 1016px;
margin:0 auto;
position: relative;
line-height: 44px;
}
.head-band, .head-content{
height: 44px;
background-color: #2459a2;
}
.tb{
display: inline-block;
color: white;
padding: 0px 12px 0px 12px;
margin-left: -5px;
}
.active-menu{
/*border: solid 1px yellow;*/
float:left;
margin-left: 20px;
}
.active-menu .active{
background-color: #336699;
color: aliceblue;
}
.head-content .tb:hover{
background-color: #336699;
color:aliceblue;
}
.active-nav{
/*border: yellow 3px solid;*/
/*float: right;*/
position: absolute;
right: 200px;
}
.key-sera{
float: right;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="head-band">
<div class="head-content">
<a hred="#" class="logo"></a>
<div class="active-menu">
<a href="#" class="tb active">全部</a>
<a href="#" class="tb">笑话</a>
<a href="#" class="tb">图片</a>
<a href="#" class="tb">挨踢1024</a>
<a href="#" class="tb">你问我答</a>
</div>
<div class="active-nav">
<a href="#" class="tb register">注册</a>
<a href="#" class="tb loggin">登陆</a>
</div>
<div class="key-sera">
<form action="#" name="serarch" id="search">
<input type="text" name="words">
</form>
</div>
</div>
</div>
</div>
</body>
</html>