Web前端开发：CSS层叠样式表

CSS层叠样式表
-html标签的两大重要属性
- 1.class属性
- 2.id属性
一、CSS语法结构
二、CSS选择器
三、选择器优先级
四、CSS的属性
五、盒子模型
五、浮动
- 1.浮动的基本现象
- 2.浮动造成的现象
六、 overflow溢出属性
- 1.溢出属性
- 2.案例：圆形头像
七、定位
八、简易博客页面搭建
- 1.搭建思路
- 2.案例

CSS层叠样式表

CSS是层叠样式表，主要用来控制调整网页的样式，它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式。

在网页上实现CSS样式调整一般有两种方式：

内嵌式

将CSS代码集中写到HTML文档的头部head标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是直接在HTML文件中直接添加CSS样式的方式；
嵌入式

是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。

CSS主要用来调节HTML标签的样式

-html标签的两大重要属性

在网站页面中，内容都是由HTML构成的，并且上面有很多一样的HTML标签。当我们想修改标签的样式时，需要通过标签的两大属性来进行区分

标签的两大重要属性的作用：用来区分标签

1.class属性

将标签分门别类，主要用于批量查找
每个标签都可以设置1个或者多个class
class属性一般专门用于给某个特定的标签设置样式的

类似于面向对象中的类

2.id属性

精确查找标签，主要用于点对点
每个标签都可以设置唯一一个id
前端开发中id一般不用于设置样式，一般由js来使用id属性

class 和 id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字p、a、img等

一、CSS语法结构

学习CSS的流程

（1）先学习如何查找标签

（2）再学习如何调整样式

1.语法结构

css语法分为：① 选择器②声明

声明由属性和值组成，多个声明之间用分号分割

选择器{
    样式名1:样式1,
    样式名2:样式2
}

2.CSS注释语法

# 支持单行、多行
/*注释语法*/

3.引入CSS的多种方式

（1）嵌入式

在html 的 head标签内 style标签内部写

<style> 
    h {
        color: cornflowerblue;
    }
</style>

（2）外链式

html内通过link标签引入外部css文件

<link rel="stylesheet" href="mycss.css">

myscss.css文件

h1 {
    color: cornflowerblue;
}

（3）内联样式（行内式）

在标签内部通过style属性直接编写

   <h1 style="color: cornflowerblue">天天开心</h1>

不推荐使用，增加了html标签与css样式之间的耦合，拓展性较差

优先级

行内式 > 嵌入式、外链式

嵌入式、外链式之间：
代码自上而下运行，谁靠近标签，谁的优先级高

二、CSS选择器

CSS选择器会贯穿整个web前端开发，包括爬虫

1.CSS基本选择器

（1）标签选择器

直接按照标签名查找标签，进行范围查询/批量查询

用法：标签名{}

标签名称 {
  属性名:属性值
}

div{
     color: rebeccapurple;
}

（2）类选择器

按照标签的class值，查找标签

用法：. + class值{}

.class的值 {
  属性名:属性值
}

.c1{
    color: rebeccapurple;
 }

（3）id选择器

按照标签的id值，精准查找

用法：# + id值{}

#id值 {
  属性名:属性值
}

#d1 {
    color: red;
}

（4）通用选择器

直接选择页面所有的标签

用法：* {}

 * {
   color: red;
}

2.CSS组合选择器

标签之间嵌套的关系

    <p>ppp</p> /*div的哥哥标签*/
    <p>ppp</p> /*div的哥哥标签*/
    <div>
        <p>divdiv /*div的儿子标签*/
            <span>divdivspan</span> /*div的孙子标签*/
        </p>
        <p>ppp</p> /*div的儿子标签*/
        <span>divspan</span> /*div的儿子标签*/
    </div>
    <p>ppp</p> /*div的弟弟标签*/
    <span>spanspan</span> /*div的弟弟标签*/

对于标签的上下层级以及嵌套关系称呼：

祖先标签、父标签、后代标签、子标签、哥哥标签、弟弟标签、...

（1）后代选择器

作用：找到标签的指定的所有后代标签
符号：空格
后代选择器可以通过空格一直延续下去

父标签 后代标签{
  
}

div span{
    color: red;
}

（2）子标签选择器

作用：找到指定标签所有的指定的儿子标签(只指定儿子标签，不会查找其他嵌套的标签)
符号： >
子标签选择器可以通过>符号一直延续下去

父标签>子标签 {
    属性名:属性值;
}

div>span{
        color: red;
}

（3）毗邻选择器

作用：选择同级别下面紧挨着的标签
符号： +
只选择同级别紧挨着的下面的指定标签，不选择紧挨着的上面的标签

div+span{
            color: red;
        }

（4）弟弟选择器

作用：查找同级别下面所有的弟弟标签
符号：~

标签1>标签1的所有弟弟标签 {
    属性名:属性值;
}

div~span{
            color: red;
}

3.选择器的分组与嵌套

（1）合并查找

多个选择器合并查找

语法

选择器1,选择器2,选择器3 {
    属性名:属性值;  
}

例：

div,p,span {
            color: red;
        }
或者
div,
p,
span {
            color: red;
        }

（2）混合使用

选择器混合使用

查找class的值为c1的 p标签

p.c1 {
    color: red;
}

查找id是d1的div标签

div#d1 {
    color: red;
}

查找含有c1样式值（样式类）里面p标签中含有c2样式值的标签

.c1 p .c2{
           color: red;
       }

4.属性选择器

按照属性名查找

[name]

按照属性名=属性值查找

[name="duoduo"]

查找name为duoduo的所有div标签

div[name="duoduo"]

查找name以duoduo为开头的所有div标签

div[name^="duoduo"]

查找name以duoduo为结尾的所有div标签

div[name$="duoduo"]

查找name中包含duoduo的所有div标签

div[name*="duoduo"]

5.伪类选择器

（1）a标签

a标签中，没有跳转过网址的a标签默认是蓝色，点击过的则为紫色

a标签	代表的状态
a:link	未被访问过的初始状态
a:hover	鼠标悬浮在该目标时的状态
a:active	鼠标按下时的状态
a:visited	以及被访问过的状态

a:link {
    color: black;
}

a:hover {
    color: red;
}

a:active {
    color: green;
}

a:visited {
    color: cornflowerblue;
}

a标签中添加了target="_blank"还是无法在新窗口中打开链接，可以在head标签中添加
<head><base target="_blank" /></head>

（2）input标签

获取焦点、失去焦点，焦点代指鼠标

input获取焦点（被点击）之后采用的样式

input:focus {
        background-color: pink;
}

6.伪元素选择器

通过css来渲染文本

before和after多用于清除浮动

标签	作用
p:first-letter	首字母
p:before	在文本开头CSS渲染
p:after	在文本末尾CSS渲染

css添加文本，在html中无法正常选中

        p:first-letter {
            font-size: 46px;
            color: red;
        }
        p:before {
            content: "CSS渲染文本前";
            color: blue;
        }
        p:after {
            content: "CSS渲染文本后";
            color: violet;
        }

三、选择器优先级

1.选择器相同，导入方式不同

就近原则

2.选择器不同，导入方式不同

内联样式 > id选择器 > 类选择器 > 标签选择器

按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

3.打破选择器优先级

可以通过添加 !important方式来强制让样式生效，但并不推荐使用，因为如果过多的使用!important会使样式文件混乱不易维护。

!important 提升优先级

四、CSS的属性

1.字体样式

调整字体font_family

多个字体，从前往后匹配，如果没有第一种字体，则使用后面的字体

font_family:"微软雅黑","仿宋"

font_size:48px;

字体粗细font_weight

font_weight:lighter;

字体颜色color

# 直接填写
color:red;    
# 编号
color:#3d3d3d;
# rgb编码
color:rgb(0,0,0)
      rgba(0,0,0,0) 最后一位填写透明度

取色器工具

文本位置text-align

text-align:center;

文本装饰text-decoration

text-decoration:none
主要用于取消a标签的下划线

文本缩进text-indent

页边距大小

text-indent:32px;

例：

div {
    font-size: 48px;
    font-weight: bolder;
    color:rgba(200,102,0,0.5) ;
    text-align: left;
    text-decoration:underline;
    text-indent:100px;
}

2.背景属性

宽度/长度：以像素为单位，宽或高一般只指定一个，另一个会按照图片尺寸来等比例放大缩小

width:800px;
height:800px;

背景颜色background-color

background-color: orange;

添加背景图片

url(网页链接/本地连接)

图片如果超出指定像素大小，会自动截取或者自动铺满指定范围

background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");

background-image: url("666.png");

背景重复background-repeat

 background-repeat:repeat(默认):背景图片平铺排满整个网页
 background-repeat:repeat-x：背景图片只在水平方向上平铺
 background-repeat:repeat-y：背景图片只在垂直方向上平铺
 background-repeat:no-repeat：背景图片不平铺

背景位置background-position

background-position: center center

当属性名相同时，可以采用便捷写法

background:  url("666.png") blue no-repeat center center;

背景附着background-attachment

background-attachment: fixed

属性值	含义
fixed	背景图像相对于窗体固定。任凭页面内容滚动，背景图像始终静止不动
scroll	背景图像相对于元素固定。当窗体的内容滚动时，窗体的背景图像会跟着移动；当一般元素的内容滚动时，背景图像不会跟着移动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起移动
local	背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动

例：

div {
    width: 800px;
    height: 800px;
    background-color: orange;
    background-image:url(""https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-1apple.png"") ;
    background-repeat: repeat-x;
    background-position: center center
	}

3.边框样式

边框宽度width 边框颜色color

left right top bottom 指定方向

border-left-width: 5px;
border-left-color: #ff0000;

边框样式style

值	作用
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

border-left-style: solid;

简写：

border-left: 5px solid #ff0000

画圆radius

画圆 width=height
椭圆 width!=height
圆角 radius=1/2(height+border)

.c1{
  width: 150px;
     height: 150px;
     border:4px dashed dodgerblue;
     border-radius: 100%;

 }
 .c2 {
     width: 180px;
     height: 40px;
     border:4px dotted red;
     border-radius: 50%;
 }
 .c3 {
     width: 180px;
     height: 36px;
     border: 4px solid pink;
     border-radius: 20px;
 }

4.display属性

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示，并且不占空间。一般用于配合JavaScript代码使用。
display:"block"	设置成块级标签默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	设置成行内标签，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	设置成行内块级标签，使元素同时具有行内元素和块级元素的特点。

将标签隐藏起来

页面上不会显示，也不会保留标签的位置

display: none

visibility属性也可以隐藏，但是会保留标签的位置

    <div>1111</div>
    <div style="visibility: hidden">2222</div>
    <div>3333</div>

五、盒子模型

我们可以将标签看成是一个快递盒，主要指div标签

快递盒子里面有什么？

1.快递盒子中有实际物品----content内容

2.物体与内部盒子墙之间的距离----padding内边距、内填充

3.快递盒的厚度----border边框

4.两个盒子之间的距离----margin外边距

padding

padding属性值的顺序：上右下左

padding-left: 50px;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 60px;

margin

div {
        border:4px solid dodgerblue;
        margin-top: 20px;
        /* margin:参数顺序 */
    }

五、浮动

浮动主要用来做页面布局，脱离了正常的平面，浏览器是三维的页面

1.浮动的基本现象

    <style>
        .c1 {
            border:3px solid red;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: #eca4da;
            float:left;
        }
        .c3 {
            height: 100px;
            width: 100px;
            background-color: orange;
            float:left;
        }


    </style>

2.浮动造成的现象

浮动的元素是脱离正常文档流的，会造成父标签塌陷

让父标签不塌陷，则需要一个c4来让两个子div显示上还在父标签内

        .c4 {
            height: 100px;
        }
    <div class="c1" id="d1">
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>

    </div>

但是多设置一个标签，过于麻烦，其实还可以通过clear属性来避免浮动

clear属性

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

.c4 {
    clear:left;
    border:2px solid dodgerblue;
    }
clear:left 左侧（包含地面、天空）不允许出现浮动的元素

解决浮动带来的塌陷影响

可以通过clear属性和伪元素器选择器，定义一个clearfix的属性，谁塌了给谁装上这个选择器

 # 新建类clearfix，并指明再标签末尾添加空白内容，并指定其为块级标签，且通过clear属性指定两边不允许出现浮动       
.clearfix:after {
    content:'';
    display: block;
    clear: both;
    }

#  为父标签装上classfix
<div class="c1 clearfix" id="d1">

浏览器会优先展示文本内容，如果内容被挡住了会自动展示文字

六、 overflow溢出属性

1.溢出属性

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.案例：圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像</title>
    <style>
        body {
            background-color: darkgray;
        }
        div {
            height: 200px;
            width: 200px;
            border: 5px solid dodgerblue;
            border-radius: 50%;
            overflow: hidden;
        }
        div img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <img src="1apple.png" alt="">
    </div>
</body>
</html>

七、定位

标签在默认情况下都是static静态的，无法通过定位的参数来移动

1.定位为四种状态

（1）static静态（标签默认的状态）

（2）relative相对定位（基于标签原来的位置）

（3）absolute绝对定位（基于某个定位过的父标签做定位）

（4）fixed固定定位（基于浏览器窗口固定不动）

相对定位relative

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物

        div {
            background-color: dodgerblue;
            width: 100px;
            height: 100px;
            left:300px;
            top:200px;
            position: relative;

        }

绝对定位absolute

style
.c1 {
            background-color: dodgerblue;
            height: 100px;
            width: 100px;
            position: relative;
        }

.c2 {
            background-color: red;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }


body
<div class="c1">购物车
    <div class="c2">购物车空空如也</div>

固定定位fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--body自带margin为8px-->*/
        body {
            margin:0;
        }
        .c1 {
            background-color: orange;
            height: 1000px;
        }

        .top {
            background-color: dodgerblue;
            width: 100px;
            height: 100px;
            left:300px;
            top:200px;
            position: fixed;

        }

    </style>
</head>
<body>

<div class="c1">111</div>
<div class="top">返回顶部</div>
</body>
</html>

2.z-index

z-index可以控制三维坐标对z轴的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿百度登录三层</title>

    <style> 
        body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.3);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 200;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
            border-radius: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>第一层</div>
<div class="cover"></div>
<div class="modal">第三层</div>


</body>
</html>

八、简易博客页面搭建

1.搭建思路

1.分析页面结构

利用布局标签div和span搭建架子
2.先编写网页骨架

用HTML来搭建内容和划分范围，设计内容
3.再编写CSS

设定样式
4.最后编写JS

添加动态效果

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cnblogs</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
<!--        头像区开始-->
        <div class="blog-avatar">
            <img src="1apple.png" alt="">
        </div>
<!--        头像区结束-->
        <div class="blog-title">
            <span>博客名字</span>
        </div>
        <div class="blog-info">
            <span>博客简介</span>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微信号</a></li>
                <li><a href="">探探号</a></li>
            </ul>
        </div>
        <div class="blog-course">
            <ul>
                <li><a href="">唱歌</a></li>
                <li><a href="">跳舞</a></li>
                <li><a href="">rap</a></li>
            </ul>
        </div>
    </div>
    <div class="blog-right">
        <div class="article-list">
            <div class="article-title">
                <span class="title">文章题目</span>
                <span  class="date">2022/11/11</span>
        </div>
        <div class="article-desc">
            <span>文章描述</span>
        </div>
        <div class="article-end">
            <span>#标签1 #标签2 </span>
        </div>
    </div>
</body>
</html>

posted @ 2022-12-01 20:30 Duosg 阅读(111) 评论(0) 编辑收藏举报

刷新页面返回顶部

duoduosg