CSS详解漫谈

最新推荐文章于 2023-11-28 23:26:19 发布

憨憨老婆伍

最新推荐文章于 2023-11-28 23:26:19 发布

阅读量332

点赞数

分类专栏： LAGOU课程文章标签： css3

本文链接：https://blog.csdn.net/hwinte/article/details/109425062

版权

摘要由CSDN通过智能技术生成

1 CSS介绍
HTML与CSS就是装修前后的区别
CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示（如何美丽的显示）
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（通过div）
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率
HTML是创造世界，CSS是在创造世界的基础上让世界更加美丽
2 CSS与HTML结合方式
2.1 第一种方式内联/行内样式
就是在我们的HTML标签上通过style属性来引用CSS代码
优点：简单方便
缺点：只能对一个标签进行修饰
在这里插入图片描述
2.2 第二种方式内部样式表
我们通过< style >标签来声明我们的CSS，通常< style >标签我们推荐写在head和body之间，也就是脖子的位置
优点：可以通过多个标签进行统一的样式设置
缺点：它只能在本页面上进行修饰
语法：选择器（属性:值；属性:值）
在这里插入图片描述
2.3 第三种方式外部样式表
我们需要单独定义一个CSS文件，注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css

(1) 在< head >中使用< link >标签引用外部的css文件
(2) import导入方式
在这里插入图片描述
关于外部导入CSS使用< link >与@import的区别？
(1) 加载顺序不同
@import方式导入会先加载html，然后才导入CSS样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面
(2) @import方式导入CSS样式，它是不支持Javascript的动态修改的，而link支持
三种样式表的优先级：满足就近原则
内联>内部>外部
3 CSS的使用
3.1 css中选择器
3.1.1 元素(标签)选择器
它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称
在这里插入图片描述
3.1.2 类选择器
类选择器在使用时使用".“来描述，它描述的是元素上的class属性值

3.1.3 id选择器
它只能选择一个元素，使用”#"引入，引用的是元素的id属性值
id选择器，比类选择器更具有唯一性

3.1.4 选择器组
逗号表示，谁和谁。例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我，你，他{
   
	手机
}

在这里插入图片描述
3.1.5 派生选择器
子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

3.1.6 CSS伪类
CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
(1) active 向被激活的元素添加一些特殊效果
(2) hover 当鼠标悬浮在元素上方时，向元素添加样式
(3) link 向未被访问的链接添加样式
(4) visited 向已被访问的链接添加样式
(5) first-child 向元素的第一个子元素添加样式
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte
在这里插入图片描述

3.2 CSS基本属性
3.2.1 文本属性
指定字体：font-family:value;
字体大小：font-size:value;
=》px：像素
=》em：倍数
字体加粗：font-weight:normal/bold；
文本颜色：color：value；
文本排列：text-align:left/right/center；
文字修饰：text-decoration:none/underline；
行高：line-height:value；
首行文本缩进：text-indent:value（2em）；
在这里插入图片描述
3.2.2 背景属性
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
backgroud-color 设置元素的背景颜色
background-image 把图像设置为背景

background-color: pink;  /*背景颜色*/
background-image: url('img/1.jpg');

background-repeat 设置背景图像是否及如何重复
(1) reapeat:在垂直方向和水平方向重复，为重复值
(2) reapeat-x:仅在水平方向重复
(3) reapeat-y:仅在垂直方向重复
(4) no-reapeat:仅显示一次
background-position 设置背景图像的起始位置
(1) 第一个值控制水平方向，正值，向右移动；负值，向左移动
(2) 第二个值控制垂直方向，正值，向下移动；负值，向上移动

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
(1) 默认值是scroll：默认情况下，背景会随着文档滚动
(2) 可取值为fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    div{
    
        width: 3000px;
        height: 3000px;
        background-color: pink;  /*背景颜色*/
        background-image: url('img/1.jpg');
        background-repeat: no-repeat; /*平铺方式*/
        background-position: 100px 0px; /*背景位置*/
        background-attachment: fixed; /*背景固定*/
    }

</style>

<body>
    
    <div>
        <h1>辣狗网</h1>
    </div>

</body>
</html>

3.2.3 列表属性
CSS列表属性作用如下：
(1) 设置不同的列表项标记为有序列表
(2) 设置不同的列表项标记为无序列表
(3) 设置不同的列表项标记为图像
有两种类型的列表：
(1) 无序列表：列表项标记用特殊图形(如小黑点、小方框等)（用的居多）
(2) 有序列表：列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记
(1) none：无标记（去除标记）
(2) disc：默认，标记是实心圆
(3) circle：标记是空心圆
(4) square：标记是实心方块
(5) decimal：标记是数字
(6) decimal-leading-zero：0开头的数字标记（01,02,03，等）
(7) lower-roman：小写罗马数字（i，ii，iii，iv，v等）
(8) upper-roman：大写罗马数字（I，II，III，IV，V等）
(9) lower-alpha：小写英文字母，The marker is lower-alpha（a，b，c，d，e等）
(10) upper-alpha：大写英文字母，The marker is upper-alpha（A,B,C,D,E等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    .a{
    
        list-style: none;
    }

    .b{
    
        list-style: decimal-leading-zero;
    }

    .c{
    
        list-style: upper-roman;
    }

</style>

<body>
    
    <ul class="a">
        <li>曹操</li>
        <li>刘备</li>
        <li>孙权</li>
    </ul>

    <ol class="b">
        <li>张一</li>
        <li>张二</li>
        <li>张三</li>
    </ol>

    <ol class="c">
        <li>王四</li>
        <li>王五</li>
        <li>王六</li>
    </ol>

</body>
</html>

在这里插入图片描述
导航条制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    li{
    
        list-style-type: none;
        color: white;
        background-color: black;
        width: 150px;
        text-align: center;
        float: left; /*水平方向显示*/
        line-height: 40px;
        font-size: 1.3em;

        cursor: pointer;
    }

    li:hover{
    
        background-color: orange;
        line-height: 50px;
    }

</style>

<body>
    
    <ul>

        <li>斗罗大陆</li>
        <li>凡人修仙传</li>
        <li>拉勾教育</li>

    </ul>

</body>
</html>

在这里插入图片描述
3.2.4 边框
CSS边框属性允许你指定一个元素边框的样式和颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    div{
   
        width: 400px;
        height: 40px;
        margin:10px; /*div和div彼此之间产生10像素的距离*/
    }

    .a{
   
        /*设置四个边*/
        border-width: 2px;
        border-color

最低0.47元/天解锁文章

憨憨老婆伍

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS详解漫谈

1 CSS介绍HTML与CSS就是装修前后的区别CSS是指层叠样式表 cascading style sheets通过CSS可以让我们定义HTML元素如何显示（如何美丽的显示）CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（通过div）通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率HTML是创造世界，CSS是在创造世界的基础上让世界更加美丽2 CSS与HTML结合方式2.1 第一种方式内联/行内样式就是在我们的HTML标签上通过style属性
复制链接

扫一扫