web前端CSS学习

最新推荐文章于 2024-07-11 17:37:13 发布

++帅

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量1.6k

点赞数 39

文章标签：前端 css

本文链接：https://blog.csdn.net/2301_79951760/article/details/135893760

版权

本文介绍了CSS的概念、语法结构，包括选择器（如元素选择器、类选择器、ID选择器）、声明、内联样式、内部样式、外部样式、盒模型、弹性盒子布局和文档流等内容，帮助读者掌握网页美化和响应式设计的基础。

摘要由CSDN通过智能技术生成

CSS概念

CSS层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名.css

CSS用于HTML文件中元素样式的定义

为什么需要CSS

使用CSS的目的就是让网页具有美观一致的页面

语法

CSS规则由两个主要部分构成：选择器，以及一条或多条声明

选择器通常是你需要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性(porperty)是您希望设置的样式属性(style attribute)。每个属性都有一个值。属性和值被冒号分开。

<style>

h3{

color:red;

font-size:30px;

}

</style>

CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style)属性。Style属性可以包含任何CSS属性

温馨提示：

缺乏整体性和规划性，不利于维护，维护成本高

<p style="color:red;font-size: 30px;">我是内联样式的方案</p>

内部样式

当单个文档需要特殊样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表

温馨提示

单个页面CSS代码具有统一性和规划性，便于维护，但在多个页面中容易混论

<head>

<style>

color:red;

font-size:30px;

}

</style>

</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理性的选择我。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面都使用<link>标签链接到样式表。<link>标签在（文档的）头部

选择器一

CSS语法规则由两个主要的部分构成：选择器，以及一条及多条声明

全局选择器

可以与任何元素匹配优先级最低，一般做样式初始化

<head>

font-size:30px;

color:red;

}

</head>

元素选择器

HTML文档中的元素p,b,div,a,img,body等

标签选择器，选择的时页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的个性

p{
font-size:14px;

}
再比如说，我想让“学完前端，继续学java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签，把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

<p>学完了<span>前端</span>，继续学习Java</p>

span

{

color:red;

}

温馨提示：

1、所有的标签，都可以是选择器。比如ul,li,lable,dt,dl,input,div等

2、无论这个标签藏得有多深，一定能够被选上

类选择器

规定用圆点.来定义，针对你想要的所有标签使用

优点

灵活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .content{
            color:red;
        }
    </style>
</head>
<body>
    
    <p>大家好</p>
    <p>我很好</p>
    <p class="content">我emol</p>
    <p class="content">我哭泣了</p>
</body>
</html>

class属性的特点

1、类选择器可以被多种标签使用

2、类名不能以数字开头

3、同一个标签可以使用多类选择器。用空格隔开

<h3 class="classone classtwo">我是一个h3</h3>

<h3 class="teshu" class="zhongyao">我是一个h3</h3> //错误

选择器二

ID选择器

针对某一特定的标签来使用，只能使用一次。CSS中的ID选择器以#来定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #text{
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <p id="text">Hello</p>
</body>
</html>

特别强调

1、ID是唯一的

2、ID不能以数字开头

合并选择器

语法：选择器1，选择器2，...{}

作用：提取共同样式，减少重复代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .text,.title{
            font-size:30px;
            color:red;
        }
    </style>
</head>
<body>
    <p class="text">我是p标签</p>
    <h3 class="title">我是标题标签</h3>
</body>
</html>

选择器优先级

CSS中，权重用数字衡量

元素选择器的权重为：1

class选择器权重为：10

id选择器的权重为：100

内联样式的权重为：1000

优先级从高到低：行内样式>ID选择器>类选择器>元素选择器

字体属性

CSS字体属性定义字体，颜色，大小，加粗，文本样式

color

规定文本颜色

color:red;

color:#ff0000;(16进制表示方法）；

color:rgb(255,0,0)；

color:rgba（255，0，0，0.5（表示透明度））；

front-size

设置文本的大小

能否管理文字的大小，在网页设计中非常重要。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

front-weight

值	描述
bold	定义粗体字符
bolder	定义更粗字符
lighter	定义更细的字符
100-900	定义由细到粗 400等同默认而700等同于bold

front-style

italic-斜体字

normal-普通

front-family

指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格，他必须加上引号

front-family:"Microsoft YaHei","

背景属性

CSS背景属性主要有以下几个

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片显示位置
background-repeat	设置背景图片如何填充
background-size	设置图片大小属性

background-color属性

设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .home{
            width:400px;
            height:400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    

    <div class="home">

    </div>
</body>
</html>

background-image属性

设置元素背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边框）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小从图像的左上角显示元素大小的那部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .home2{
            width:400px;
            height:600px;
            background-image: url("1.jpeg");
        }
    </style>
</head>
<body>
    
    <div class="home2">

    </div>

</body>
</html>

back-ground-repeat属性

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

background-size属性

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
percent	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

background-position属性

该属性设置背景图片的起始位置，其默认值是：0%0%

值	说明
left top	左上角
left center	左中
left botton	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个是水平值，第二个值是垂直位置，左上角是0%，0%，右下角是100% 100%，如果只指定了一个值，其他默认值是 550%，默认值是0% 0%
xpos ypos	单位是像素

文本属性

text-align

指定元素文本的水平对齐方式

值	描述
left	文本居左排列到右边
right	文本排列到右边
center	把文本排列到中间

text-decorationh

text-decoration属性规定添加到文本的修饰，下划线，上划线，删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-throug	定义删除线

text-transform

text-transform属性控制文本的大小写

值	描述
capitalize	定义每个字母开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

text-indent

text-indent属性规定文本中首行文本的缩进

温馨提示

负值是允许的。如果值是负数，将第一行左缩进

表格属性

表格边框

指定CSS表格边框，使用border属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>