CSS

CSS

1. 规则#

Copy
<!-- h1 为选择器，里面由属性和属性值组成，如在head的style中定义h1选择器，并设置属性，将对body中所有h1标签生效 -->
h1 {                
    width: 600px;
    heigh: 1200px;
    margin: auto;
}

2. 样式类型#

Copy
<!-- 内联样式 -->
<!-- 直接写到html元素上，没有选择器，直接声明，仅对当前元素有效 -->
    <p style="cloor:red;"> 非顶级程序员</p>

<!-- 内部样式 -->
<!-- HTML头，仅对当前页面生效，box为css规则 -->
<head>
    <style>
        .box{
            width: 600px;
            height: 1200px;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
        }
    </style>
</head>

<!-- 外部样式，最常用 -->
<!-- 通过href指定外部选择器 -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

3. 选择器#

  • 定义内部样式，当前页面所有h2标签生效
Copy
<head>
    <style>
        h2 {
            color: red
        }
    </style>
</head>
  • 定义外部样式，引用外部样式，当前页面生效
Copy
<!-- 下面为style.css 文件内容-->
h3 {
    color: red;
}

<!-- 下面为html文件引用 -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
  • 类选择器,选择器定义以点开头
Copy
<!-- 下面为style.css 文件内容 -->
.my-p{
    color: green;
}

<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="my-p"> 我是一个段落</p>
</body>
</html>
  • id选择器，选择器定义以#开头
Copy
<!-- 下面为style.css 文件内容 -->
#my-p{
    color: orange;
}


<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p id="my-p"> 我是一个段落 </p>
</body>
</html>
  • 属性选择器
Copy
<!-- 下面为style.css 文件内容,生效范围a标签下所有title属性的元素。另外一种为指定属性值为空的为粉色-->
a[title] {
    color: red;
}

a[title=""] {
    color: pink;
}

<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <a href="https://www.baidu.com" title="baidu">百度</a>
</body>
</html>
  • 通用选择器
Copy
<!-- 在style.css中可以使用*表示通用选择器，所有都会生效-->
*{
    font-family: "black";
}
  • 组合选择器
Copy
<!-- h1选择器并且具备类选择器的标签，将颜色改变为黄色 -->
h1.my-p {
    color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="my-p"> 组合选择器 </h1>
</body>
</html>


<!-- 所有h1和h2标签都修改-->
h1,h2 {
    font-size: 20px;
}
  • 父子选择器
Copy
<!-- 下面为style.css 文件内容，div下的h1 -->
div h1 {
    font-size: 30px;
}

<!-- 下面为html文件内容 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <h1> div中的h1元素 </h1>
    </div>
</body>
</html>

4. 优先级#

Copy
# CSS优先级
1. 相同规则按照加载顺序，写在后面的优先级更高
2. 继承下来的样式优先级永远低于直接指定的样式
3. 内联样式优先级最高，!important是个意外
4. 类型选择器(Type Selector) <  类选择器(Class Selector)  <  ID选择器(ID Selector)

5. 盒子模型#

  • 组成
Copy
1. 外边距
2. 边距
3. 填充
4. 内容
  • 模型配置
Copy
.box {
    width: 200px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 8px;
    margin: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 8px;
    margin-right: 9px;

    padding: 10px 9px 8px 7px;		# 上右下左直接配置
}
posted @   元气少女郭德纲！！  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript
· Consul
· CSS - 目录
· CSS - 学习笔记
· CSS基础
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示
CONTENTS
✕