CSS笔记

最新推荐文章于 2024-09-29 11:01:57 发布

你倒是敲代码啊.

最新推荐文章于 2024-09-29 11:01:57 发布

阅读量161

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/qq_43446165/article/details/104121450

版权

web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

CSS概述

概念

Cascading Style Sheets：层叠样式表
层叠：多个样式可以作用在同一个html标签上面，并且同时生效

CSS的优点

相对于html功能强大
将内容展示与样式控制分离，能够起到解耦合的作用，让分工更加容易，提高开发效率

CSS的使用：与html结合的方式

内联样式

在标签内使用style样式指定css代码

<div style="color:red;">hello world!</div>

内部样式

在head标签内，定义style标签

<html>

<head>
    <meta character="utf-8">
    <style>
        div {
            color: blue;
        }

    </style>
</head>

<body>
    <div>HELLO CSS!</div>
</body>

</html>

外部样式

在同目录下新建文件夹，在新建的文件夹内定义CSS的资源文件
在head标签内，定义style标签，引入外部的资源文件

div {
    color: red;
}

<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/winter.css">
</head>

<body>
    <div>HELLO CSS!</div>
    <div>hello world!</div>
</body>

</html>

CSS的基本语法

格式

基本格式

选择器: {
    属性名1:属性值1;
    属性名2:属性值2;
    ......
    属性名n:属性值n;
}

选择器

选择器：筛选具有相似特征的元素
分类：基本选择器，扩展选择器

基本选择器

id选择器

选择具体的id属性值的元素，建议在html当中元素的id属性值要唯一
id选择器的优先级要比元素选择器的优先级要高
基本语法

#id属性值{}

<div id="div1">HELLO</div>
<div id="div2">WORLD</div>

#div1 {
    color: red;
}

#div2 {
    color: blue;
}

元素选择器

选取具有相同标签名称的元素
基本语法

标签名称 {}

<div>HELLO</div>
<div>WORLD</div>

div {
    color: red;
}

类选择器

选取基友相同class属性的元素
类选择器的优先级要高于元素选择器
基本语法

.class属性值 {}

<p class="lang">HELLO WORLD!</p>

.lang {
    color: red;
}

扩展选择器

通用选择器

基本语法

* {}

并集选择器

基本语法

选择器1,选择器2 {}

子选择器

筛选选择器1下面的选择器2
基本语法

选择器1 选择器2 {}

父选择器

筛选选择器2的父选择器1
基本语法

选择器1>选择器2 {}

属性选择器

基本语法

元素名称[属性名称="属性名"] {}

伪类选择器

选择一些元素的状态
link：初始化的状态
visited：访问过的状态
active：正在访问的状态
hover：鼠标悬浮状态
基本语法

元素:状态 {}

实例

a:link {
    color: pink;
}

a:hover {
    color: red;
}

a:active {
    color: blue;
}

a:visited {
    columns: yellow;
}

属性

字体、文本

font-size：字体大小
color：文本颜色
text-align：文本的对齐方式
line-height：行高

p {
    color: pink;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
    border: 1px solid red;
}

背景

background：背景

html {
    background: url("G:\\Netdisk下载\\wallpaper\\1.png") center;
    width: 100%;
    height: 100%;
}

边框

border：边框

div {
    border: 1px solid yellowgreen;
    width: 100px;
    height: 100px;
}

尺寸

width：宽度
height：高度

div {
    border: 1px solid yellowgreen;
    width: 100px;
    height: 100px;
}

盒子模型

模型图
margin：外边框
padding：内边框
box-sizing: border-box向内拓展
float：浮动，left，right

.box {
    width: 300px;
    height: 150px;
    background: pink;
    padding: 30px;
    border: 20px solid yellow;
    margin: 100px;
    float: left;
}
.one {
    widows: 300px;
    height: 150px;
    background: green;
    padding: 30px;
    border: 20px solid yellowgreen;
    margin: 100px;
    float: left;
}

* {
    box-sizing: border-box;
}

在这里插入图片描述