【前端】CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_74455045/article/details/136450224

定义：层叠样式表 Cascading Style Sheets，控制页面的展示效果

1.基本语法规范

选择器 + 1/n条声明

选择器决定针对谁修改
声明决定修改啥
声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

2.格式

style标签可放在head标签（通常）或body标签中，也可放在两标签之间

<style>
    p {
         color: red;
         font-size: 40px;
    }
</style>

3.引入方式

内部样式表

通过style标签将css嵌套到html页面中，上方格式中的代码就采用这种方式

优点：让样式和页面结构分离

缺点：分离的不够彻底，尤其是css内容多的时候

行内样式表

<h1 style="color: blue; font-size: 20pxc;">你好</h1>

行内样式表优先级高于内部样式表

外部样式表

创建一个.css文件，在head标签中使用link标签引入css

<link rel="stylesheet" href="/demo.css">

4.选择器

4.1基础选择器

1> 标签选择器：格式中的代码即是标签选择器

2> 类选择器：差异化表示不同的标签，多个类名用于样式叠加

<p class="eat food">吃饭</p>
<p class="sleep">睡觉</p>

.eat {   ……
       }
.food {  ……
         }
.sleep {  ……
           }

3> id选择器：#开头

<p id="fe">前端开发</p>
<p id="server">后端开发</p>

#fe {  ……
    }
#server{  ……
       }

4> 通配符选择器：使用 * 选取所有标签，在实际应用开发中用来针对页面中所有元素默认样式进行消除，主要用来消除边距

* {
     color：red;
  }

4.2复合选择器

1> 后代选择器：又叫包含选择器，选择某个父元素中的某个子元素

ol li {
    color: red;
      }

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
</ul>

<ol>
    <li>吃饭</li>
    <li>睡觉</li>
</ol>

2> 伪类选择器：定义元素状态

a:link：选择未被访问过的链接
a:visited：选择已被访问过的链接
a:hover：选择鼠标指针悬停上的链接
a:active：选择活动链接（鼠标按下了但未弹起）

a {
    color:black;
  }
a:hover {
    color:red;
  }
a:active {
    color:green;
  }

input {
    color:blue;
  }
input:hover {
    color:black;
  }
input:active {
    color:red;
  }

<a herf="#">不跳转</a>
<br>
<input type="button" value="按钮">

5.常用元素属性

5.1字体属性

外观：多个字体用逗号分隔，从左到右查找字体，找不到则使用默认字体

<!--style在head标签中-->
<style>
    div {
        font-family: 'Microsoft YaHei';
        font-size: 60px;
    }
</style>

<body>
    <div>微软雅黑</div>
</body>

颜色：三种表示方法，单词、十六进制形式、RGB方式

<style>
    div {
        color:red;
        color:#ff0000;
        color:rgb(255,0,0);
    }
</style>

<body>
    <div>红色</div>
</body>

粗细：normal (默认 400)、bold (粗体 700)、bolder (更粗)、lighter (更细)、inherit (继承父元素)

<style>
    div { 
        font-weight: bolder;
        font-weight: 300;
    }
</style>

<body>
    <div>粗体</div>
</body>

样式：normal (默认)、italic (斜体)、oblique (倾斜)、inherit (继承父元素)

<style>
    div { 
        /* 设置倾斜 */
        font-style: italic;
        /* 取消倾斜 */
        font-style: normal;
    }
</style>

<body>
    <div>倾斜</div>
</body>

5.2文本属性

位置：left、center、right

<style>
    h1 {
        text-align: left;
    }
    h2 {
        text-align: center;
    }
    h3 {
        text-align: right;
    }
</style>

<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
</body>

缩进：单位使用 px 或 em，一个 em 就是当前元素的文字大小；缩进可以是负的，表示向左缩进

* lorem：生成长文字

<style>
    div {
        text-indent: 20px;
    }
    p {
        text-indent: -2em;
    }
</style>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas accusamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas accusamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</p>
</body>

装饰： underline (下划线)、overline (上划线)、line-through (删除线)、none (啥都没有，可给a标签去掉下划线)

<style>
    div {
        text-decoration: underline;
    }
    p {
        text-decoration: line-through;
    }
    a {
        text-decoration: none;
    }
</style>

<body>
    <div>hello world</div>
    <p>delete</p>
    <a href="#">不跳转</a>
</body>

行间距：上下文本行之间的基线距离

基准线：顶线、中线、基线、底线

<style>
    p {
    line-height:40px;
    }
</style>

<body>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio perspiciatis deleniti, sit doloribus quia perferendis eaque nobis. Optio quos tenetur suscipit in expedita at odio architecto, libero illum quo error!Lorem</p>
</body>

5.3背景属性

颜色：同字体

<style>
    div {
        background-color: aqua;
    }
    p {
        /* 背景透明 */
        background-color: transparent;
    }
</style>

图片： URL可以加引号也可不加

<style>
    div {
        background-image: url(abc.jpg);
        height: 300px;
    }
</style>

平铺：repeat (平铺默认)、no-repeat (不平铺)、repeat-x (水平平铺)、repeat-y (垂直平铺)

<style>
    div {
        background-image: url(rose.jpg);
        background-repeat: repeat-x;
    }
</style>

位置：相当于坐标轴 (x, y)

方位名词：（top，left，right，bottom）
精确单位：坐标或百分比（以左上角为原点）
混合单位：同时包含方位名词和精确单位

<style>
    div {
        background-image: url(flower.jpg);
        background-position: top;
        background-position: 200px,200px;   
        background-position: 100px,center;
    }
</style>

尺寸：

具体尺寸：20px 30px，表示（宽度高度）
百分比：按照父元素尺寸设计
cover：使背景图像完全覆盖背景区域
contain：覆盖并使图像宽度高度完全适应内容区域

<style>
    div {
        background-image: url(tree.jpg);
        background-size: 300px 400px;
        background-size: contain;
    }
</style>

5.4文本框属性

使边框带圆角效果，length是内切圆的半径，数值越大，弧线越强烈

圆形：使length的值为正方形边长的一半
圆角矩形：：使length的值为矩形高度的一半

<style>
    div {
        width: 200px;
        height: 200px;
        border: 2px green solid;
        border-radius: 50%;
    }
</style>

还可以对四个角分别设置：

<style>
    div {
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        border-bottom-left-radius: 2em;
        border-bottom-left-radius: 2em;
        <!-- 顺时针 -->
        /* border-radius: 10px 20px 30px 40px; */
    }
</style>

6.元素的显示模式

6.1块级元素

h1-h6 p div ul ol ……

6.2行内元素

a img ……

我们要做到是将行内元素与块级元素之间的转换：

display：block 改成块级元素
display：inline 改成行内元素
display：inline-block 改成行内块元素

<style>
    a {
        /* 使两个a标签分别占用一行 */
        display: block; 
    }
</style>

<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</body>

7.盒模型

每一个Html元素相当于一个矩形的盒子

构成：边框border，内容content，内边距padding，外边距margin

7.1边框

粗细：border-width
样式：border-style 默认无边框，solid (实线)，dashed (虚线)，dotted (点线)
颜色：border-color

层叠性依据就近原则

<style>
    div {
        width: 200px;
        height: 100px;
        border-width: 10px;
        border-style: solid;
        border-color: green;
        /* 支持混写，没有顺序要求 */
        border: 2px dotted red;
        /* 可改变四个方向的边框 */
        border-top: 3px;
        border-left: 4px;
    }
</style>

浏览器默认边框会撑大“盒子”，可使用box-sizing修改浏览器的行为

* {
        box-sizing: border-box;
    }

7.2内边距

默认内容是顶着边框放置的，使用padding可控制这个距离

可给四个方向上都加上边距：padding-top/bottom/left/right

<style>
    div {
        width: 200px;
        height: 100px;
        padding-left: 5px;
        padding-bottom: 3px;
        /* 混合写法 */
        padding: 5px; /*四个方向都是5px*/
        padding: 5px 10px; /*上下内边距5px,左右内边距10px*/
        padding: 2px 5px 10px; /*上内边距2px,左右内边距5px,下内边距10px*/
        padding: 2px 5px 10px 20px; /*上右下左 顺时针*/
    }
</style>

7.3外边距

控制盒子和盒子之间的距离

可给四个方向上都加上边距：margin-top/bottom/left/right

<style>
    div {
        border: solid 10px red;
        margin-top: 2px;
        margin-bottom: 2px;
        /*混合写法同内边距padding*/

        /*块级元素水平居中*/
        margin: auto;
        margin-right: auto;
        margin-left: auto;
    }
</style>

8.弹性布局

flex item，可以纵向排列，也可横向排列，称为flex direction (主轴)

justify-content：设置主轴上的子元素排列方式。start (居左默认)、end (居右)、center (居中)、space-between (均匀分布)
align-items：设置侧轴上的子元素排列方式。start (居上默认)、end (居下)、center (居中)、space-between (均匀分布)

<style>
    div {
        height: 300px;
        width: 400px;
        background-color: green;
        display: flex; /*弹性布局*/
        justify-content: center; /*主轴*/
        align-items: end; /*侧轴*/
    }
    div span {
        height: 100px;
        width: 100px;
        background-color: red;
    }
</style>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>