CSS基本语法

余笙zh

已于 2023-04-08 16:56:50 修改

阅读量602

点赞数 1

文章标签： css html 前端 Powered by 金山文档

于 2023-04-08 16:48:15 首次发布

本文链接：https://blog.csdn.net/m0_73503454/article/details/130030878

版权

CSS概述

CSS是Cascading Style Sheets（级联样式表）

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如：CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系

HTML是网页内容，CSS定义页面的样式

基本语法

行内样式表是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内嵌样式表是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入外部的css文件   外部样式表 实际开发中用的比较多-->
        <link href="css/index.css" rel="stylesheet" />
        <!-- 此标签内,用来写css样式表,内嵌样式表-->
        <!-- <style type="text/css">
               p{ color: green; font-size: 30px;}
        </style> -->
    </head>
    <body>
        <h1>标题</h1>
        <p>2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <p>2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <!-- 行内样式表 一般开发用的较少 
         <p style="color: red;font-size: 20px; font-weight: 800;">
             2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
         </p>
         <p style="color: red;font-size: 20px; font-weight: 800;">
                      2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
         </p>-->
    </body>
</html>

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{}

id 选择器：通过标签的id属性值选中唯一的一个标签

语法：#id属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

通配选择器:可以用来选中页面中的所有的标签

语法：*{}

选择器分优先级：匹配越多的选择器,优先级越低

由高到低：Id选择器>类选择器>标签选择器>通配选择器

CSS定义页面的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入外部的CSS文件，外部样式表，实际开发用的多-->
        <!-- <link href="css/index.css" rel="stylesheet"/> -->
        <!-- 内嵌样式表，用来写CSS样式表 -->
        <!-- <style type="text/css">
            p{color: aquamarine;font-size: 30px;}
        </style> -->
        <style type="text/css">
            .p1{
                color: #7FFFD4;
            }
            .p2{
                color: cornflowerblue;
            }
            p{
                color: yellow;
            }
            #h1{
                color: red;
            }
            *{
                color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <h1 id="h1">标题</h1>
        <p class="p1">2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <p class="p2">2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <p class="p1">2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <p class="p2">2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</p>
        <p>2022年12月14日16:30</p>
    </body>
</html>

文本

color：字体颜色

font-family：字体

text-align：文本对齐

text-decoration:line-through：定义穿过文本下的一条线

text-decoration:underline：定义文本下的一条线

text-decoration:none：定义标准的文本

font-style: italic；斜体文本

font-weight：字体粗细

line-height：设置行高

letter-spacing可以指定字符间距

text-indent用来设置首行缩进

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .p1{
                color: #008000; 
                font-size: 20px; 
                font-weight: 900;/* 加粗 */
                font-family: 楷体;/* 字体 */
                /* text-align: center; */
                /* text-decoration: underline; 文本修饰-加下划线*/
                /* text-decoration: line-through; 文本修饰-删除线*/
                /* font-style: italic;  斜体 */
                /* line-height: 50px; *//* px 是像素单位 文本行高*/
                /* letter-spacing: 20px; 文字间的间隔*/
                text-indent:2em;/*  首行缩进   em-表示当前文本中一个字符的大小 */
            }
            a{
                text-decoration: none;/* 取消下划线 */
            }
        </style>
    </head>
    <body>
        <p class="p1">
             2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
             2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
        </p>
        <p class="p1">
             2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
             2022年12月14日16:30，我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞
        </p>
        <a href="">百度</a>
        <a href="">百度</a>
    </body>
</html>

背景

background-color背景颜色

background-image背景图片

background-repeat背景重复

background-size背景尺寸

background- position 背景位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .p1{
                width: 800px;
                height: 600px;
                background-color: aqua;
                background-image:url(img/bg.jpg) ;
                background-repeat: no-repeat;/* 背景图片重复 */
                background-position:center;/* 背景位置 */
                background-size: 300px 300px;/* 背景大小  宽 高 */
            }
        </style>
    </head>
    <body>
         <p class="p1">
         </p>
    </body>
</html>

CSS 列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style-image 将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style-type 设置列表项标志的类型。

list-style 简写属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 后代选择器  父级 子级 */
            .u1 li{
                color: #6495ED;
                text-align: center;
                /* list-style-type:none ;
                list-style-image: url(img/ul.jpg);
                list-style-position: inside;/* 默认为outside */ */
                /* 简写方式对列表修饰 */
                list-style: none  url(img/ul.jpg) inside;
            }
        </style>
    </head>
    <body>
        <ul class="u1">
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
        </ul>
        <ul class="u2">
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
            <li>我国民营航天的朱雀二号遥一运载火箭在中国酒泉卫星发射中心点火起飞</li>
        </ul>
    </body>
</html>

CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
            a{
                text-decoration: none;
                color: black;
            }
            /* 当鼠标移入到标签上时,切换到此样式表 */
            a:hover{
                color:blue;
                text-decoration: underline;
            }
            /* 当鼠标点击标签时,切换到此样式表 */
            a:active{
                color: red;
            }
            
            .p1:hover{
                background-color: #00FFFF;
                color:red;
            }
            .p1:active{
                background-color: blue;
            }
            
            /* 当鼠标聚焦到可以输入的标签时 切换到此样式表 */
            .input:focus{
                background-color: #00FFFF;
            }
        </style>
    </head>
    <body>
        <p class="p1">啊啊啊啊</p>
        <a href="">百度</a>
        <a href="">百度</a>
        <a href="">百度</a>
        
        <input type="text" class="input" />
        <input type="text" class="input" />
        <input type="text" class="input" />
    </body>
</html>

透明

定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别值为1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{
                opacity: 0.1;  /* 标签透明度  0-完全透明 1-完全不透明 */
            }
            img:hover{
                opacity: 0.5;
            }
            img:active{
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <img src="img/h.jpg" />
    </body>
</html>

块级，行级，行级块标签

块级标签：无论内容多少都会独自占据一行的。默认的宽度与浏览器一致/或者与父标签一致，默认的高：如果没有内容高度为0；有内容，与内容高度一致。可以设置宽高

块级标签主要用来布局网页

例如<p>、<h1>、<ul>、<ol>、<hr/> 等。

行级标签：只占内容的大小，不会占一行。不能设置宽和高，设置了也是无效的。

例如 <font>、<b>、<i>、<a> 等。

行级块标签：可以设置宽高，不占一行

例如 <input/> <img/>等

⭐注意：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。

a可以包含任何标签，除去a本身；

p标签不可以包含任何的块标签。

display

通过display样式可以修改标签的类型。

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a{
                width: 100px;
                height: 30px;
                display: block;/* 把行级标签变成了块级标签 */
                background-color: #00FFFF;
                text-align: center;
                line-height: 30px; /*高度和height一样时，为垂直居中*/
            }
            p{
                display: inline;/* 把块级标签变成行级标签    none 让标签隐藏*/
            }
        </style>
    </head>
    <body>
          <a href="">百度</a>
          <p>ssss</p>
          <p>ssss</p>
          <p>ssss</p>    
</body>
</html>

div和span

🌞div标签

div是块级标签，可以包含任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

🌞span标签

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来选中文档中的文字。

以后常用的标签：div，span，a，img，表格，表单

盒子模型

🌞内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

width和height属性只适用于块标签(包含行级块)。

🌞内边距指的就是标签内容区与边框以内的空间，会影响整个盒子的大小，使用padding属性来设置

例如：

padding-left:10px;

padding:10px 20px 30px 40px 这样会设置标签的上、右、下、左四个方向的内边距。

🌞边框是标签可见框的最外部，使用border属性来设置盒子的边框：border:1px red solid; 样式分别指定了边框的宽度、颜色和样式。也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框样式：dotted (点线)，dashed(虚线)，solid(实线)，double(双线)，groove(槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

🌞外边距是标签边框与周围标签相距的空间，一个标签距离另一个标签的距离，不影响标签的实际大小，但是会影响标签的位置。使用margin属性设置。用法和padding类似，同样也提供了四个方向：margin-top/right/bottom/left。

margin的值可以为负值。

左右的外边距可以给auto，外边距会最大化，浏览器会将左右外边距设置为相等。上下外边距不能设置auto，如果设置了auto默认是0。水平居中也可以简写为margin:0 auto。

外边距和外边距可以重叠，上面的margin-bottom:10px，下面的margin-top:10px，这两个盒子距离为10px。

清除浏览器的默认样式

往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

*{ 
	margin:0; 
	padding:0; 
}

文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

浮动

浮动指标签脱离原来的文档流，在父标签中浮动起来

浮动使用float属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时，我们都会为其指定一个宽度。

当一个标签浮动以后，其下方的标签会上移。

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。

浮动的问题：浮动后的标签,是不占原来的文档流空间，没有将父标签撑开, 称为高度塌陷。会影响到后面标签的布局。

解决办法:

为父级标签设置一个高度

清除浮动：清除浮动后,会将父级标签自动撑开和浮动的标签高度一致

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left：忽略左侧浮动

right：忽略右侧浮动

both：忽略全部浮动

CSS定位(position)

相对定位(relative)

相对定位是以它自己原来的位置进行移动的。移动后，原来的空间仍然被占用着(没有脱离原来的文档流)。可以通过position:relative; 开启相对定位，left right top bottom四个属性来设置标签的偏移量。

特点：

当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

相对定位是相对于标签在文档流中原来的位置进行定位

相对定位的标签不会脱离文档流

绝对定位(absolute)

开启了标签的绝对定位,标签就会漂浮起来(脱离原来的文档流)，绝对定位是相对于离他最近的开启了定位的父标签,以及浏览器的窗口进行定位( 不建议使用)。所以，一般开启一个标签的绝对定位，都会为其父标签开启相对定位。可以通过position:absolute; 开启相对定位，left right top bottom四个属性来设置标签的偏移量