前端基础-CSS3（表现层）

最新推荐文章于 2023-12-01 13:19:48 发布

锋声

最新推荐文章于 2023-12-01 13:19:48 发布

阅读量443

点赞数

分类专栏：前端基础文章标签： css3 css html

本文链接：https://blog.csdn.net/xikaifeng/article/details/120263713

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、什么是CSS
2、选择器
3、美化网页元素
4、盒子模型
5、浮动
6、定位
7、总结

1、什么是CSS

1.1、什么是CSS

Cascading Style Sheel 层叠级联样式表
CSS：表明（美化网页）
字体，颜色，边距，高度，背景图片，网页定位，网页浮动…

1.2、发展史

CSS1.0
CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~

1.3、快速入门

创建文件规范格式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style> 可以编辑css的代码，每一个声明，最好使用分号结尾
    语法：
      选择器{
          声明 1 ；
          声明 2 ；
          声明 3 ；
      }
     -->
    <style>
        h1{
        color: red;
        }
    </style>

</head>
<body>
	<h1>我是标题</h1>
</body>
</html>

建议使用这种规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style> 可以编辑css的代码，每一个声明，最好使用分号结尾
    语法：
      选择器{
          声明 1 ；
          声明 2 ；
          声明 3 ；
      }
    -->
    <link rel="stylesheet" href="css/style01.css">
	<!-- 使用lick 将css文件导入进来 -->
</head>
<body>
	<h1>我是标题</h1>
</body>
</html>

 /*建议单独建立css文件
   这样即美观，也有助于查找，修改，复用
	*/
h1{
   color: red;
}

CSS的优势：

内容和表现分离；
网页结构表现统一，可以实现复用；
样式十分的丰富；
建议使用独立于html的css文件；
利用SEO，容易被搜索引擎收录！

1.2、CSS的三种导入方式

1、行内样式
2、内部样式
3、外部样式

优先级：行内样式>内部样式>外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式    -->
    <style>
        h1{
        color:green;
        }
    </style>
    <!--外部样式    -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
	<!--优先级：就近原则-->
	<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
	<h1 style="color:red">我是标题</h1>
</body>
</html>

拓展：外部样式两种方法

链接式：

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式：

@import 是CSS2.1 特有的！

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

2、选择器

2.1、基本选择器

2.1.1、标签选择器

选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/* 标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
        color: red;
        background: #3cbda6;
        border-radius: 24px;
        }
        p{
        font-size: 60px;
        }
    </style>
</head>
<body>
	<h1>学Java</h1>
	<p>听狂神说</p>
</body>
</html>

2.1.2、类选择器 class

选择所有class 属性一致的标签，可以跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
    /*类选择器的格式 .class的名字{}
        好处，可以多个标题归类，是同一个class，可以复用
    */
        .T1{
        color:red;
        }
        .T2{
        color:yellow;
        }
    </style>
</head>
<body>
	<h1 class="T1">标题1</h1>
	<h1 class="T2">标题2</h1>
	<h1 class="T1">标题3</h1>
	
	<p class="T2">P标签</p>
</body>
</html>

2.1.3、id 选择器

全局唯一！ #id名字{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
    /*id选择器 ：id必须保证全局唯一！
    #id名字{}
    优先级：
    不遵循就近原则，固定的
    id选择器 > class选择器 > 标签选择器
    */
        h1{
        color:red;
        }
        .c2{
        color:blue;
        }
        #i3{
        color:green
        }
    </style>
</head>
<body>
	<h1 class="c2" id="i3">标题1</h1>
	<h1 class="c2">标题2</h1>
	<h1>标题3</h1>
	<h1>标题4</h1>
	<h1>标题5</h1>
</body>
</html>

优先级

id选择器 > class选择器 > 标签选择器（不遵循就近原则，固定的）

2.2、层次选择器

2.2.1、后代选择器

在某个元素的后面，祖爷爷爷爷爸爸儿子

/*后代选择器*/
body p{
	color:blue;
}

2.2.2、子选择器

一代，只指儿子

/*子选择器*/
body>p{
	color:yellow;
}

2.2.3、相邻兄弟选择器

同辈，只有一个，相邻（向下）

/*相邻兄弟选择器*/
.active + p{
	color:green;
}

2.2.4、通用兄弟选择器

同辈，向下所有，选中元素的向下所有兄弟元素

/*通用兄弟选择器*/
.active~p{
	color:orange;
}

2.3、结构-伪类选择器

伪类

/*ul的第一个子元素*/
ul li:first-child{
	color:blue;
}
/*ul的最后一个子元素*/
ul li:last-child{
	color:green;
}
/*选择 p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序
*/
p:nth-child(1){
	color:red
}
/*定位到父元素，下的p元素的第二个，类型        */
p:nth-of-type(2){
	color:yellow;
}

2.4、属性选择器

id + class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	.demo a{
	   display: block;
	   height: 50px;
	   width: 50px;
	   float:left;
	   border-radius: 10px;
	   background: blue;
	   text-align: center;
	   color: beige;
	   text-decoration: none;
	   margin-right: 5px;
	   font: bold 20px/50px Arial;
	}
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>

属性名，属性名=属性值（正则）
=表示绝对等于
*=表示包含
^=表示以…开头
$=表示以…结尾
存在id属性的元素 a[]{}

基础用法 a[]{} 存在id属性的元素

/*存在id属性的元素 a[]{}*/
a[id]{
    background: red;
}

= 绝对等于

/*id=first的元素*/
 a[id=first]{
 	background:yellow;
 }

*= 包含这个元素

/*class 中包含有 links的元素*/
a[class*="links"]{
	background:green;
}

^= 以这个开头

/*选中href中以http开头的元素*/
a[href^=http]{
	background:green;
}

$= 以这个结尾

/*选中href中以pdf结尾的元素*/
a[href$=pdf]{
	background:green;
}

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验

span标签：重点要突出的字，使用span套起来（只是普通标签，但常用span）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
	学习语言<span id="title1">JAVA</span>
</body>
</html>

3.2、字体样式

font-family：字体可以同时设定英文和汉字两个字体
font-size：字体的大小，px像素（Pixel），em相对长度尺寸
font-weight：字体粗细
color:字体颜色
font:字体粗细，大小，行高，字体（例：font:bold 20px/50px Arial;）

body{
	font-family:楷体;
	color：red;
}
h1{
	font-size： 50px;
}
.p1{
	font-weight：blod;
}

3.3、文本样式

颜色：color rgb rgba
文本对齐的方式：text-align:center
首行缩进：text-indent
行高：line-height 单行文字上下居中！line-height = height
装饰：text-decoration
文本图片水平对齐：vertical-align:middle

coloer:颜色

h1{
   color:rgba(0,255,255,0.5);
   color:#000;
   color:red;
}

text-align:排版，居中，居右，居左left（默认）
text-indent:首行缩进

h1{
   text-align:center;
   text-indent:2em;
}

line-height:行高，行高和块的高度一致时，就可以上下居中

h1{
   /*块高*/
   height:300px;
   /*行高*/
   line-height:300px;
}

text-decoration:装饰

h1{
	/* 下划线，中划线，上划线*/
    text-decoration:underline;
    text-decoration:line-through;
    text-decoration:overline;
    /*a标签，超链接去下划线*/
    text-decoration:none;
}

图片、文字水平对齐

<style>
    img,span{
    	vertical-align:middle;
    }
</style>
<body>
	<p>
	    <img src="a.png" alt="">
	    <span>hello</span>
	</p>
</body>

3.4、超链接伪类


/*默认的颜色*/
a{
   text-decoration:none;	/*取消下划线*/
   color:black;
}
/*鼠标悬停的状态（重点）*/
a:hover{
   color:orange;
   font-size:50px;		/*悬浮变大*/
}
/*鼠标按住未释放的状态*/
a:active{
   color:green;    
}
/*阴影 ：阴影颜色，水平偏移（右+），垂直偏移（下+），阴影半径*/
#1i{
   text-shadow:#blue 10px -5px 2px;
}

3.6、列表ul li

/*list-style{
	none:去掉原点
	circle：空心圆
	decimal：数字
	square：正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
	width:300px;
}

3.6、背景

背景颜色：background
背景图片

div{
    width:1000px;	/*宽度*/
    height:700px;	/*高度*/
    border:1px solid red;	/*边框，角弧度，边线（实线），颜色*/
    background-image:url("images/tx.jpg");
    /*导入图片，默认是全部平铺的 repeat*/
    .div1{
        /*平铺x轴*/
        background-repeat:repeat-x;
    }.div2{
        /*平铺y轴*/
        background-repeat:repeat-y;
    }.div3{
        /*不平铺*/
        background-repeat:no-repeat;
    }
}

3.7、渐变

网址：https://www.grablent.com
径向渐变、圆形渐变

background-color:#FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)

4、盒子模型

4.1什么是盒子模型

margin：外边距
padding：内边距
border：边框

在这里插入图片描述

4.2、边框

border：边框的粗细 边框的样式 边框的颜色;
例：border：4px solid red;

4.3、内外边距

外边距的妙用：居中元素
margin:0 auto; ：上下为0，左右相等
margin:0; ：所有边距为零
margin:0 1; ：上下和左右
margin:0 1 2 3; ：上 右 下 左

margin 属性的方向是由顺时针旋转，margin、border、paddiong一样

盒子的计算方式：

margin+border+padding+内容的大小

4.4、边框圆角

div{
    width:100px;
    height:100px;
    border:10px solid red;
    /* 左上 右上 右下 左下 ，顺时针方向*/
    border-radius:55px 55px 55px 55px
    /*两个元素时为：左上右下，右下左上*/
}

4.5、盒子阴影

div{
	width:100px;
	height:100px;
	border:10px solid red;
    /*右 下 模糊度 颜色*/
	box-shadow:10px 10px 80px yellow;
}

5、浮动

5.1标准文档流

块级元素：独占一行例：h1~h6 、p、div、列表…
行内元素：不独占一行例：span a img strong…
注：行内元素可以被包含在块级元素中，反之，则不可以~

5.2、display（重要）

/*  display 显示
    block 块元素
    inline 行内元素
    inline-block 即保持原有元素，还添加另外一种元素
	none	不是块元素，也不是行内元素，会消失不见，但代码存在。
*/
div{
	width:100px;
	height:100px;
	border:1px solid red;
	display:inline-block;
}
span{
	width:100px;
	height:100px;
	border:1px solid red;
	display:inline-block;
}

5.3、float

float:left; //左浮动
float:right //有浮动

5.4、父级边框塌陷的问题

5.4.1、防止浮动移动

clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none; 默认值,两侧允许有浮动元素

5.4.2、解决方案

1、增加父级元素的高度

#father{
	border:1px #000 solid;
	height:800px;
}

2、增加一个空的div标签，清除浮动

/*新建一个div*/
<div class="clear"></div>	
.clear{
	clear:both;
	margin:0;
	padding:0;
}

3、overflow

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

4、在父类添加一个伪类：after

#father:after{
    content:' ';
    display:block;
    clear:both;
}

5.4.3、小结

设置父元素的高度：简单，元素假设有了固定的高度，就会被限制
浮动元素后面添加空div：简单，代码中尽量避免空div
overflow：简单，下拉滚动条的一些场景避免使用
在父类添加一个伪类：after：写法稍微复杂，但是没有副作用

5.5、display对比float

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所有要解决父级边框塌陷的问题

6、定位

6.1、相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

top:-20px;
left:20px;
bottom:-10px;
right:20px;

6.2、绝对定位-absolute

定位：基于xxx定位，上下左右~
相对定位后，它原有的位置还存在，边框不会缩小
绝对定位后，它原有的位置不在存在，边框会缩小
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;

        }
        #second{
            background-color: green;
            border: 1px dashed #0ece4f;
            position: absolute;
            right:30px;
            top:30px
        }
        #third{
            background-color: red;
            border: 1px dashed #ff1b87;
        }
    </style>
</head>
<body>
<div id = "father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
        height:1000px;
        }
        div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
        width:100px;
        height:100px;
        background:red;
        position:absolute;
        right:0;
        bottom:0;
        }
        div:nth-of-type(2){ /*fixed，固定定位*/
        width:50px;
        height:50px;
        background:yellow;
        position:fixed;
        right:0;
        bottom:0;
        }
    </style>
</head>
<body>
<div>d1</div>
<div>d2</div>
</body>
</html>

6.4、z-index

图层 z-index：默认是0，最高无限~999
只有存在于相对定位和绝对定位的时，只有浮起来才会有层级概念


/*父级元素相对定位*/
#content ul{
    position:relative;
}
/*子级元素绝对定位*/
.tipText,.tipBg{
    position:absolute;
    width:380px;
    height:25px;
    top:216px
}
/*抬高定位层*/
.tipText{
    z-index:999;
}
.tipBg{
    bcakground:black;
    opacity:0.5/*背景透明度*/
    filter:alpha(opacity=50)	/*ie8之前版本的背景透明度*/
}

背景透明度 opacity:0.5；

7、总结

在这里插入图片描述

CSS3学习地址

锋声

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础-CSS3（表现层）

文章目录1、什么是CSS1.1、什么是CSS1.2、发展史1.3、快速入门1.2、CSS的三种导入方式2、选择器2.1、基本选择器2.1.1、标签选择器2.1.2、类选择器 class2.1.3、id 选择器2.2、层次选择器2.2.1、后代选择器2.2.2、子选择器2.2.3、相邻兄弟选择器2.2.4、通用兄弟选择器2.3、结构-伪类选择器2.4、属性选择器3、美化网页元素3.1、为什么要美化网页3.2、字体样式3.3、文本样式3.4、超链接伪类3.6、列表ul li3.6、背景3.7、渐变4、盒子模型4
复制链接

扫一扫