Cascading Style Sheet层叠级联样式表代码示例解析

作者：袖梨 2022-06-25

本篇文章小编给大家分享一下Cascading Style Sheet层叠级联样式表代码示例解析，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

快速入门：

css;">

CSS的三种导入方式：

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

标题一

内部样式表（不建议这样写）：


	



    标题一

外部样式表（优先级最低，但实现了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

some content

层次选择器：

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

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

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

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

/* 后代选择器 */
body p{
}
/* 子选择器 */
body>p{
}
/* 相邻选择器（弟弟选择器） */
.active + p{
}
/* 通用选择器（所有弟弟选择器） */
.active~p{
}

结构伪类选择器：

/* div中的第一个p元素 */
div p:first-child{
}

/* div中的最后一个p元素 */
div p:last-child{
}

/* div中的最后一个p元素 */
div p:last-child{
}

属性选择器：

/* 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-
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

浮动：

(图文详细)最通俗易懂的CSS 浮动float属性详解：https://www.jb51.net/css/714194.html

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

块级元素：								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 父元素定位，否则相对于浏览器定位

Cascading Style Sheet层叠级联样式表代码示例解析

标题一

标题一

标题一

标题一

相关文章

精彩推荐