CSS基础语法,选择器,常用属性

最新推荐文章于 2024-08-02 20:34:24 发布

Zel1

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量451

点赞数

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

本文链接：https://blog.csdn.net/yzl1293346757/article/details/126780453

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概述

CSS的引入:HTML语言是对网页中的内容定义的语言,其中也包含了对网页样式的定义,但是在HTML中对网页样式的定义需要使用到大量的标签,导致代码繁琐且冗余例如:

 <b>
        <font color="skyblue">
            <big>被修饰的文字</big>
        </font>
</b>

上述案例中可以看出,每添加一种修饰就需要用到一个标签,在大量的对网页中的内容定义样式时非常麻烦,这时就引入了专门定义标签样式的语言CSS

CSS是级联样式表(Cascading Style Sheets),用于关联标签与样式属性

是一种样式表语言,用于控制HTML文档中的外观样式

可以将网页内容与样式分离,将样式定义在css的文件中或者定义在html文档中,能达到样式重用的目的

与HTML的关系:HTML负责对网页中的内容进行定义,而CSS负责定义内容中的样式

基本语法

1.行内样式表

定义在标签中,使用标签中的属性style为标签定义样式

语法格式为style="css属性1:属性值;css属性2:属性值;css属性3:属性值;"

其中style中的属性值是css中的语法

<p style="color:skyblue;font-size: 20px;">
            被修饰的段落
</p>

2.内嵌样式表

定义在头标签中,使用 < style > < style />标签该标签的属性值type定义为type="text/css"表示该标签表示css样式

语法格式为:

< style type="text/css" > css代码; < /style >

3.外部样式表

将css中的代码放入以.css为扩展名的外部样式表文件中去,然后通过link标签将该文件链接到或HTML文件中

语法格式为:

< head>

< link href="newstyle.css" rel="stylesheet" type="text/css">

< /head>

其中css文件中的代码与内嵌样式表中的代码完全一致

选择器

由于css将样式与标签分离开了,在进行对标签的关联时就需要用到选择器

选择器用于对样式表与标签进行一对一,一对多,多对一的关联

1.标签选择器

选择的范围较大,可以将相同的标签全部选择与该样式表关联

语法:标签名{样式表}

2.类选择器

选择的范围在相同的类中,可以将同一类的标签全部选择与该样式表关联

类的定义在标签中的class属性中定义

语法:.类名{样式表}(注意前面有一个 . 表示类选择器)

3.id选择器

选择的范围只有唯一的id,可以该id的标签与该样式表关联

id的定义在标签中的id属性汇总定义,id的属性值是唯一的

语法:#id名{样式表}(注意前面有一个 . 表示类选择器)

4.通配选择器

选择的范围是网页内容中的所有表示,范围是最大的

一般用定义网页的格式

语法:*{样式表}

5.组合选择器

将多个选择器关联与同一个样式表

用于定义不同标签拥有的共同属性

语法:选择器1,选择器2,选择器3,……{样式表}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 标签选择器 */
            p{
                color: red;
            }
            /* 类选择器 */
            .p1{
                color: aquamarine;
            }
            .p2{
                color: aqua;
            }
            /* id选择器 */
            #p0{
                color: black;
                font-style: italic;
            }
            /* 通配选择器 */
            *{
                font-size: 30px;
            }
            /* 组合选择器 */
            .p1,p,#p0{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <p id="p0" class="p1">测试段落</p>
        <p class="p1">测试段落</p>
        <p class="p2">测试段落</p>
        <p class="p1">测试段落</p>
        <p class="p2">测试段落</p>
        <p>测试段落</p>
    </body>
</html>

选择器除了以上阐述的几种之外还有其他的选择器,但是基本的选择器就是上面四种

选择器的优先级

当一个标签被多个选择器选中时,会优先级高的选择器样式表相同的属性会覆盖掉优先级低的选择器,但是优先级低的选择器中的属性依然保留

选择器的优先级按照选择器的选择范围来排序依次是

id选择器>类选择器>标签选择器>通配选择器

注意:组合选择器中的优先级是与原选择器优先级是相同的

CSS中的常用属性

文本属性

● color：字体颜色

● font-size：字体大小

● 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用来设置首行缩进

注意:css语法中的所有有关数组大小(不是等级)的属性值都必须要带有单位

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p{
                color:red;
                font-size: 20px;
                /* text-align: center; *//* 设置文字的对齐方式 */
                font-family: 楷体;
                font-weight: bold;/* 700磅 */
                text-decoration: underline;/* 文本加下划线 */
                text-decoration: line-through;/* 文本加删除线 */
                font-style: italic;/* 设置文本的格式,例如斜体 */
                line-height: 70px;/* 设置文本的行高 */
                letter-spacing: 20px;/* 设置文本中文字的间距的大小 */
                text-indent: 2em;/* 设置文本前缩进多少距离 em单位表示当前文本文字的大小*/
                
            }
            a{
                text-decoration: none;/* 定义标准的文本 */
            }
        </style>
        
    </head>
    <body>
        <p>测试段落测试段落测试段落测试段落</p>
        <p>测试段落测试段落测试段落测试段落</p>
        <p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落</p>
        <a>测试超链接</a>
    </body>
</html>

背景属性

● background-color背景颜色 ● background-image背景图片图表地址的语法格式为url(路径) ● background-repeat背景重复 no-repeat表示背景图片与背景颜色不重复 ● background-size背景尺寸 ● background- position 背景位置属性值除了上下左右外还可以设置left top 或left bottom等属性表示西北西南方向

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                width: 700px;
                height: 700px;
                background-color: aqua;
                background-image: url(img/1.png);
                background-size: 600px 600px;/* 设置背景的尺寸大小 */
                background-repeat: no-repeat;
                /* background-position: center; */
                background-position: left bottom;
                
            }
        </style>
    </head>
    <body>
        <p>测试段落</p>
    </body>
</html>

列表属性

● list-style-image 将图象设置为列表项标志。 ● list-style-position 设置列表中列表项标志的位置。属性值中的inside与outside表示图表在列表项内或外 ● list-style-type 设置列表项标志的类型。 ● list-style 简写属性。可以将所有属性写在一行中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            li{
                text-align: center;
                /* list-style-type: none;
                list-style-image: url(img/1.png);
                list-style-position: inside; */
                
                list-style:none url(img/1.png) outside;/* 简写 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
    </body>
</html>

透明度

用于定义透明效果的属性是 opacity。 opacity 属性设置标签的不透明级别值为1。规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

伪类

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

语法格式:

选择器:hover{样式表},表示标签处于鼠标移入的状态下时显示该样式表

选择器:active{样式表},表示标签处于鼠标点击状态下时显示该样式表

选择器:focus{样式表},表示标签处于鼠标聚集(即光标所在的地方)是显示该样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .in1{
                color: gray
            }
            .in1:hover{
                color: azure;
            }
            a:hover{
                color: black;
            }
            a:active{
                color: red;
            }
            .in2:focus{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <input type="text" class="in1"/><br />
        <a href="" >百度</a>
        <a href="" >百度</a>
        <a href="" >百度</a><br />
        
        <input type="text" class="in2"/><br />
        <input type="text" class="in2"/><br />
    </body>
</html>