CSS3.0(Cascading Style Sheet) 层叠级联样式表

快速入门：

CSS01

h1 {

color: red;

}

标题一

CSS的三种导入方式：

行内样式(优先级最高，但不建议这样写)：

标题一

内部样式表(不建议这样写)：

h1 {

color: red;

}

标题一

外部样式表(优先级最低，但实现了HTML与CSS的分离，推荐使用)：

h1 {

color: red;

}

标题一

选择器：

3种基本选择器：

标签选择器(权重最低)

类选择器

id选择器(权重最高)

/* 标签选择器，会选择所有h1标签 */

h1 {

color: red;

background: #3cbda6;

border-radius: 20px;

font-size: 80px;

}

/* 类选择器，会选择所有类名为text-red的元素 */

.text-red{

color: red;

}

/* id选择器，会选择id为description的元素，id必须保证唯一 */

#description{

color: black;

}

标题一

content

content

some content

层次选择器：

后代选择器：在某个元素内的元素(包括子代、孙代…)

子选择器：在某个元素内一层的元素(只包括子代)

相邻选择器(一个弟弟选择器)：某个元素 之后 的 一个 同级选择器

通用选择器(所有弟弟选择器)：某个元素 之后 的 所有 同级选择器

/* 后代选择器 */

body p{

}

/* 子选择器 */

body>p{

}

/* 相邻选择器(弟弟选择器) */

.active + p{

}

/* 通用选择器(所有弟弟选择器) */

.active~p{

}

p1

p2

p3

结构伪类选择器：

/* div中的第一个p元素 */

div p:first-child{

}

/* div中的最后一个p元素 */

div p:last-child{

}

/* div中的最后一个p元素 */

div p:last-child{

}

p1

p2

p3

属性选择器：

/* class为demo中的所有a标签 */

.demo a{

}

/* 存在id的a标签 */

a[id]{

}

/* id为first的a标签 */

a[id=first]{

}

/* href以http开头的a标签 */

a[href^=http]{

}

/* href以pdf结尾的a标签 */

a[href$=pdf]{

}

字体样式(字体，字体风格，字体大小，字体粗细，字体颜色)：

font-family: 楷体;

font-style:oblique;

font-size: 40px;

font-weight: bold

color: #a13d30;

font: italic bolder 12px "楷体";

文本样式(文本居中对齐，首行缩进两个字母，行高，文本装饰)

text-align: center;

text-indent: 2em;

line-height:30px;

text-decoration: underline;

文本阴影(阴影颜色，水平偏移，垂直偏移，阴影半径)

text-shadow: #3cc7f5 -5px 5px 2px

a标签去除下划线：

text-decoration: none;

超链接伪类：

//默认属性

a{

text-decoration: none;

color: #000000;

}

//鼠标进入

a:hover{

color: orange

}

//鼠标按住未松开

a:active{

color: green

}

//鼠标点击之后

a:visited{

color: red

}

li 标签的样式：

//去除圆点

list-style: none;

//空心圆

list-style: circle;

//数字编号

list-style: decimal;

//正方形

list-style: square;

背景样式：

//背景颜色

background-color: blue

//背景图片(默认是 repeat 平铺效果)

background-image: url("");

//水平平铺,垂直平铺,不平铺

background-repeat:repeat-x;

background-repeat:repeat-y;

background-repeat:no-repeat;

盒子模型：

上下外边距为0，左右居中:margin: 0 auto;

上下左右外边距为0:margin: 0;

上下外边距为0，左右外边距为1px:margin: 0 1px;

设置上左下右外边距:margin: 0 10px 1px 10px;

上下左右内边距为10px:padding: 10px;

上下内边距为0，左右内边距为10px:padding: 0 10px

设置上左下右内边距:padding: 10px 10px 10px 10px

浮动：

标准文档流： 元素默认自左往右，从上往下的流式排列方式。分为块级元素和行内元素

块级元素：display: block;

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

行内元素：display: inline;

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

是块元素，但可以内联(在一行)：display: inline-block;

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

比如我们可以给一个link(a元素)inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

元素不显示也不占用空间：display: none;

定位：

相对定位(相对自己原本的位置偏移，它原来的位置仍然被保留在标准文档流中)

相对自己原本位置上移20px，右移20px：

position: relative;

top: -20px;

left: 20px;

绝对定位(它原来的位置脱离了标准文档流)

绝对定位 absolute 一般和 relative 搭配使用，绝对定位的元素会一层一层地寻找父元素，然后相对于 relative 父元素定位，否则相对于浏览器定位

.b {

height: 900px;

width: 600px;

position: relative;

}

.a {

height: 500px;

width: 600px;

/* position: relative; */

}

.s {

height: 200px;

width: 200px;

position: absolute;

right: 0px;

bottom: 0px;

}

.ss {

height: 50px;

width: 50px;

}

.r {

background-color: red;

}

.b {

background-color: blue;

}

.y {

background-color: yellow;

}

.g {

background-color: green;

}

固定定位(相对于浏览器定位，不随页面滚动而滚动)

.ss {

height: 50px;

width: 50px;

position: fixed;

top: 30px;

right: 20px;

}

.g {

background-color: green;

}

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效(例如 position:absolute;)

补充：

设置元素透明度：

opacity: 0.5

到此这篇关于详解CSS3.0(Cascading Style Sheet) 层叠级联样式表的文章就介绍到这了,更多相关css Style Sheet样式表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！