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


Posted in HTML / CSS onJuly 16, 2021

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

快速入门:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS01</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>标题一</h1>
</body>

</html>

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

CSS的三种导入方式:

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

<h1 style="color: red;">标题一</h1>

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

<head>
	<style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>标题一</h1>
</body>

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

h1 {
    color: red;
}
<head>
    <link rel="stylesheet" href="css/a.css">
</head>

<body>
    <h1>标题一</h1>
</body>

选择器:

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;
}
<h1>标题一</h1>
<p class="text-red">content</p>
<span class="text-red">content</span>
<p id="description">some content</p>

层次选择器:

  • 后代选择器:在某个元素内的元素(包括子代、孙代…)
  • 子选择器:在某个元素内一层的元素(只包括子代)
  • 相邻选择器(一个弟弟选择器):某个元素 之后 的 一个 同级选择器
  • 通用选择器(所有弟弟选择器):某个元素 之后 的 所有 同级选择器
/* 后代选择器 */
body p{
}
/* 子选择器 */
body>p{
}
/* 相邻选择器(弟弟选择器) */
.active + p{
}
/* 通用选择器(所有弟弟选择器) */
.active~p{
}
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <div>
        <p>p4</p>
        <p>p5</p>
    </div>
</body>

结构伪类选择器:

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

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

/* div中的最后一个p元素 */
div p:last-child{
}
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <div>
        <p>p4</p>
        <p>p5</p>
        <p>p6</p>
    </div>
</body>

属性选择器:

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

盒子模型:
 

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

上下外边距为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.3water.com/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 父元素定位,否则相对于浏览器定位

<body>
    <div class="b g">
        ll
        <div class="a r">
            最外面
            <div class="s b">
                中间
                <div class="ss y">
                    最里面
                </div>
            </div>
        </div>
    </div>

    <style>
        .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;
        }
    </style>
</body>

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

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

<div class="ss g">
</div>
    
<style>
	.ss {
		height: 50px;
		width: 50px;
		position: fixed;
		top: 30px;
		right: 20px;
	}
        
	.g {
		background-color: green;
	}
</style>

z-index

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

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

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

补充:

设置元素透明度:
opacity: 0.5

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

 
HTML / CSS 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
纯CSS3实现div按照顺序出入效果
CSS3中Animation实现简单的手指点击动画的示例
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
html5表单的required属性使用
Jul 07 #HTML / CSS
You might like
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
高中军训感言500字
2014/02/24 职场文书
小学语文课后反思精选
2014/04/25 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015国庆节宣传语
2015/07/14 职场文书
小学毕业感言200字
2015/07/30 职场文书
如何书写邀请函?
2019/06/24 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers