2023-08-17 21:08阅读: 2评论: 0推荐: 0

CSS3

1. CSS导入方式

优先级：就近原则

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css导入方式</title>
    <!-- 2.内部样式 -->
    <style>
        h2{
            color: aqua;
        }
    </style>
 
    <!-- 3.外部样式-->
    <link rel="stylesheet" href="css/style01.css">
</head>
<body>
<!--1.行内样式：在标签原始中，编写一个style属性-->
<h1 style="color: pink">我是标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
</body>
</html>

2. 选择器

2.1 基本选择器

优先级：id > class > 标签

2.1.1 标签选择器

会选择body下所有h1标签

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        h1{
            color: orange;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
</body>
</html>

2.1.2 类选择器

会选择所有带有demo01类选择器的标签

可以复用

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .demo01{
            color: pink;
        }
        .demo02{
            color: blue;
        }
    </style>
</head>
<body>
<!--类选择器-->
<h1 class="demo01">类选择器</h1>
<h1 class="demo01">类选择器</h1>
<h1 class="demo02">类选择器</h1>
<h1 class="demo02">类选择器</h1>
 
</body>
</html>

2.2.3 id选择器

不可以复用

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #demo01{
            color: aqua;
        }
        #demo02{
            color: orange;
        }
        .demo02{
            color: pink;
        }
        #demo03{
            color: blue;
        }
        h1{
            color: blueviolet;
        }
    </style>
</head>
<body>
<!--类选择器必须保证全局唯一-->
<h1 id="demo01">id选择器1</h1>
<h1 id="demo02" class="demo02">id选择器2</h1>
<h1 class="demo02" id="demo03">id选择器3</h1>
<h1 class="demo02">id选择器4</h1>
<h1>id选择器5</h1>
</body>
</html>

2.2 层次选择器

2.2.1 后代自选择器：在某个元素后面

body 里面所有的p标签

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        body p{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是后代选择器</p>
<div>
    <p>我是后代选择器</p>
</div>
</body>
</html>

2.2.2 子选择器

第一代的p标签

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style>
        body>p{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是子选择器</p>
<div>
    <p>我是子选择器</p>
</div>
</body>
</html>

2.2.3 相邻兄弟选择器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .active + p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 向下相邻，只有一个-->
<p class="active">相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
</html>

2.2.4 通用选择器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style>
        .active~p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 向下所有兄弟元素-->
<p class="active">通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
</body>
</html>

2.3结构伪类选择器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*ul里的第一个选择器*/
        ul li:first-child{
            background-color: orange;
        }
 
        /*ul里的最后一个选择器*/
        ul li:last-child{
            background-color: pink;
        }
        /* 选择父元素里第一个元素（是p标签才生效）*/
        p:nth-child(2){
            background-color: blue;
        }
        /*选择父元素里第一个p标签*/
        p:nth-of-type(1){
            background-color: blueviolet;
        }
 
    </style>
</head>
<body>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
 
</body>
</html>

2.4 属性选择器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo01 a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: #2700ff;
            text-align: center;
            color: gainsboro;
            line-height: 50px;
            text-decoration: none;
            margin-right: 5px;
        }
        /*选中带有id标签的a元素*/
        /*a[id]{
 
        }*/
        a[id=first]{
            background-color: blueviolet;
        }
        /*
        =:绝对对于
        *=：包含
        ^=:以...开头
        $=:以...结尾
        */
        /*a[class*=links]{
            background-color: yellow;
        }*/
        a[href^="http"]{
            background-color: brown;
        }
    </style>
</head>
<body>
    <p class="demo01">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test">2</a>
        <a href="../../resources/bd.jpg" class="links item">3</a>
        <a href="../../html5/index.html" class="links item">4</a>
    </p>
</body>
</html>

3. 字体样式

 font-family:字体
font-size:字体大小
font-weight:粗细
color:字体颜色

4. 文本样式

 color rgb rgba:颜色
text-align:center:居中对齐
text-indent:2em 缩进
line-height:行高（行高 = 块高：垂直居中）
vertical-align:middle 文本图片水平对齐

5. 文本阴影和超链接伪类

 a:hover{}-->鼠标悬停
a:active{}-->鼠标按住未释放
a:link{}-->未访问
a:visited{}-->访问之后颜色
text-shadow{}-->阴影颜色 水平偏移 垂直偏移 阴影半径

6. 列表样式

 list-style:none-->去掉圆点  circle-->空心圆  decimal-->数字  square-->正方形

7. 背景

 background-color:pink;-->图片未显示时显示颜色
background-image:url("path");默认平铺 
							no-repeat-->不重复 repeat-x-->水平平铺 repeat-y-->垂直平铺

8. 渐变

 background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

9. 盒子模型

 margin:外边距
padding:内边距
border:边框
宽度 = 圆角边框半径：圆

9. 浮动

 块级元素：h1-h6 div p ul...
行内元素：span a img strong...

10. 父级边框塌陷问题

增加父级元素的高度

 #father{
	height:800px;
}

增加一个空的div标签，清楚浮动

 <div class="clear"></div>
 
.clear{
	clear:both;
}

overflow

 父级元素加：
overflow:hidden;

父元素添加一个伪类(推荐)

 #father:after{
	cotent:‘’;
	display:block;
	clear:both;
}

11. 相对定位

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width: 200px;
            height: 180px;
            font-size: 12px;
            line-height: 40px;
        }
        .one{
            background-color: #2700ff;
        }
        .two{
            background-color: #2ed422;
        }
        /*相对于自己原来的位置偏移，原来位置保留*/
        .three{
            position: relative;
            top: 30px;
            background-color: #5716c1;
        }
 
    </style>
</head>
<body>
 
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

12. 绝对定位

没有父级元素时，以浏览器为标准
原来位置不保留

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width: 200px;
            height: 180px;
            font-size: 12px;
            line-height: 40px;
        }
        .one{
            position: absolute;
            top: 100px;
            background-color: #2700ff;
        }
        .two{
            position: absolute;
            top: 300px;
            background-color: #2ed422;
        }
 
        .three{
            background-color: #5716c1;
        }
 
    </style>
</head>
<body>
 
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

13. z-index

 z-index:决定一个元素在文档中的层叠顺序

上一篇JVM

下一篇JavaScript

本文作者：Morita-desin

本文链接：https://www.cnblogs.com/yqquinn/p/17638860.html

posted @ 2023-08-17 21:08 Morita-desin 阅读(2) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Quinn

CSS3

CSS3

1. CSS导入方式

2. 选择器

2.1 基本选择器

2.1.1 标签选择器

2.1.2 类选择器

2.2.3 id选择器

2.2 层次选择器

2.2.1 后代自选择器：在某个元素后面

2.2.2 子选择器

2.2.3 相邻兄弟选择器

2.2.4 通用选择器

2.3结构伪类选择器

2.4 属性选择器

3. 字体样式

4. 文本样式

5. 文本阴影和超链接伪类

6. 列表样式

7. 背景

8. 渐变

9. 盒子模型

9. 浮动

10. 父级边框塌陷问题

11. 相对定位

12. 绝对定位

13. z-index

公告

常用链接

我的标签

随笔分类

随笔档案

相册

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>css导入方式</title>
	<!-- 2.内部样式 -->
	<style>
	h2{
	color: aqua;
	}
	</style>

	<!-- 3.外部样式-->
	<link rel="stylesheet" href="css/style01.css">
	</head>
	<body>
	<!--1.行内样式：在标签原始中，编写一个style属性-->
	<h1 style="color: pink">我是标题</h1>
	<h2>我是二级标题</h2>
	<h3>我是三级标题</h3>
	</body>
	</html>

	font-family:字体
	font-size:字体大小
	font-weight:粗细
	color:字体颜色

	color rgb rgba:颜色
	text-align:center:居中对齐
	text-indent:2em 缩进
	line-height:行高（行高 = 块高：垂直居中）
	vertical-align:middle 文本图片水平对齐

	a:hover{}-->鼠标悬停
	a:active{}-->鼠标按住未释放
	a:link{}-->未访问
	a:visited{}-->访问之后颜色
	text-shadow{}-->阴影颜色水平偏移垂直偏移阴影半径

	background-color:pink;-->图片未显示时显示颜色
	background-image:url("path");默认平铺
	no-repeat-->不重复 repeat-x-->水平平铺 repeat-y-->垂直平铺

	background-color: #FFDEE9;
	background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

	margin:外边距
	padding:内边距
	border:边框
	宽度 = 圆角边框半径：圆

	块级元素：h1-h6 div p ul...
	行内元素：span a img strong...