CSS学习小结
一 什么是css
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的,这些元素如何呈现,涉及许多方面,如整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二 css选择器
css选择器分为
1.群组选择器 如:p, body, img, div{}
2.兄弟选择器 如:p + p { color:#f00; }
3.属性选择器 如: p[title] { color:#f00; }
4.包含(后代)选择器 如:body ul li{}
5.子元素选择器 如:div > p{}
6.ID选择器 如:#myDiv{}
7.类选择器 如:.class1{}
8.伪元素选择器 如:E:first-line,E:before
9.伪类选择器 如:E:first-child ,E:visited,E:focus,E:enabled
10.标签选择器 如:p { font-size:1em; }
子选择器和后代选择器的区别:
后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。
子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用。
三 CSS如何生效
1.行内样式
行内样式是写在HTML标签的style属性里的,比如:
<p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p>
行内样式会覆盖嵌入样式和链接样式
2.嵌入样式
嵌入的css样式是放在HTML文档的head元素中的,这点想必大家都知道,这里就不赘述了。
3.链接样式
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
链接样式的作用范围可以是整个网站。只要使用标签把样式表链接到每个页面,相应的页面就可以使用其中的样式,除了link方法外,还可以使用@import指令
@import url(css/style.css);
@import指令必须出现在样式表中其他样式之前,否则该链接的文件不会被加载
四 颜色、尺寸、对齐
1.颜色
我们可以采用颜色名称也可以使用颜色RGB16进制值,来设定前景或背景的颜色。如:
<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值,3个字节分别代表RGB(Red,Green,Blue)的0~255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>
2.尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
新建如下 HTML 文件:
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
这个元素高 200 pixels,占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
</body>
</html>
再建对应的 CSS 文件如下:
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
3.对齐
对于元素中的文本,我们可以简单的设置text-align
属性为left
, center
, right
即可(显然缺省的是左对齐),上例中已有相关的应用。
五 盒子模型
盒子模型概念
假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框在页面内只占100个像素,就需要将内容的宽度设置为70像素,请看下图:
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成
盒子在页面中所占的高度
是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成
在CSS中,width和height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
给ul下的li设置宽度,那么他们将平均掉它们所占容器的宽度。div >ul> li> a标签所占宽度和高度:
当你为body元素指定div时,每个div默认的宽为浏览器的100%,高度在每个浏览器的解析都是不一样的,比如在火狐下是131px,在chrome下则是142px
六 边框与边距
每一个元素都会在页面上生成一个盒子,因此,HTML页面实际上就上由一堆盒子组成的。默认情况下,每个盒子的边框是不可见的,背景也是透明的。
边框(border)有如下3个相关属性:
1. 宽度(border-width):可以使用`thin、medium`和`thick`等文本值,也可以使用除百分比和负值之外的任何绝对值
2. 样式(border-style):有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等
3. 颜色(border-color):可以使用任意颜色值,包括RGB、HSL、十六进制颜色值和颜色关键字
叠加外边距
垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则:
<style type="text/css">
p{
color: black;
background: #ccc;
margin-top: 50px;
margin-bottom: 30px;
height: 50px;
border: 1px solid red;
}
</style>
第一段的下外边距与第二段的上外边距相邻,你可能认为它们之间的外边距是80px,但实际的间距却是50px。像这样的上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。因此,在这里,第二段较宽的上外边距就会碰到第一段的边框。也就是说,较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。
七 定位
position
属性用于对元素进行定位。该属性有以下一些值:
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position
属性后,我们才能使用top, bottom, left, right
属性,否则定位无效。
static
设置为静态定位position: static;
,这是元素的默认定位方式,也即你设置与否,元素都将按正常的页面布局进行。
即:按照元素在 HTML出现的先后顺序从上到下,从左到右进行元素的安排。
relative
设置为相对定位position: relative;
,这将把元素相对于他的静态(正常)位置进行偏移
试试如下的代码:
<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看?</div>
<!-- CSS -->
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}
fixed
设置为固定定位position: fixed;
,这将使得元素固定不动(即使你上下左右拖动浏览器的滚动条)。
此时元素固定的位置仍由top, bottom, left, right
属性确定,但相对的是视口(viewport,就是浏览器的屏幕可见区域)
如下的代码将会在浏览器右下角固定放置一个按钮元素:
<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小,看看右下角的按钮发生了什么?</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: darkkhaki;
}
八 浮动
对内联元素设置float
和absolute
属性,可以让元素脱离文档流,并且可以设置其宽高。
float: left的元素会尽量靠近父元素的左上角
float: right的元素会尽量靠近父元素的右上角
/*======万能Float闭合======*/
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display: inline-block;} /* for IE/Mac */
.clear {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
}
/*======万能Float闭合3======*/
.clear{
height:0px;
clear:both;
font-size:0px;
line-height:0px;
zoom: 1;
}
浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
九 不透明度
元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发IE的hasLayout属性,清除浮动、清除margin的重叠等。
当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)
十 伪类和伪元素
伪类
a:link {color: black} /* 未访问的链接 */
a:visited {color: blue} /* 已访问的链接 */
a:hover {color: red} /* 当有鼠标悬停在链接上 */
a:active {color: purple} /* 被选择的链接 */
为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!a:active 必须位于 a:hover 之后!!
伪元素
“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。
伪元素如果没有设置“content”属性,伪元素是无用的。
插入的元素默认情况下是内联元素,如果你要为其设置宽高等属性,你需要将他定义为块级元素
#element:before{
content : "";
display : 'block'
height : 1000px;
width : 1000px;
}
注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。