CSS 基础

于 2024-08-19 20:46:02 发布
阅读量348 收藏 6
点赞数 2
分类专栏： # 基础篇 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iku_n/article/details/141334583
版权

CSS

2.2.1 什么是CSS

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

css文件后缀名为：css

css用于HTML文档中元素样式的定义

2.2.2 CSS的引入方式

语法：

css规则由两个主要的部分构成：选择器，以及一条或者多条的声明（样式）

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

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

属性 是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开

案例

<style>
    h3{
        color: blue;
        font-size: 12px;
    }
</style>
内联样式（行内样式）

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

温馨提示

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

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

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

温馨提示

单个页面内的css代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<style>
    p{
        color: red;
        font-size: 30px;
    }
</style>
外部样式（推荐）

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

2.3.3 CSS选择器

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

全局选择器

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

*{
    margin: 0;
    padding: 0;
}
元素选择器

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

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

p{
    color: blue;
    font-size: 30px;
}

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

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

span {
    color: red;
}

 温馨提示

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

2，无论这个标签藏的多深，一定能够被选择上

3，选择的所有，而不是一个

类选择器

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

优点

灵活

<!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>
        
        .cont_ent {
            color: red;
        }

    </style>
</head>
<body>
    
    <p>大家好</p>
    <p>我是沙琪马</p>
    <p class="cont_ent">我是**</p>
    <p class="cont_ent">我的神威难藏泪眼</p>
</body>
</html>

class属性的特点

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

2，类名不能以数字开头

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

<p class="cont_ent cont_ent2">我是谁？</p>
 ID选择器

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

<p id="text">Hello</p>

#text {
    color: red;
    font-size: 30px;
    background-color: yellowgreen;
    border: 3px dashed green;
}

特别强调

1，ID是唯一的

2，ID不能以数字开头 

合并选择器

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

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

p,h3 {
    font-size: 30px;
    color: red;
}
.header,.footer{
    height: 300px;
}
 选择器的优先级

CSS中，权重用数字衡量

元素选择器的权重为：1

class选择器的权重为：10

id选择器的权重为：100

内联样式的权重为：1000

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

2.2.4 属性

字体属性

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

color 字体颜色

规定文本的颜色

div{ color: red;}
div{ color: #ff0000;}
font-size 字体大小

 设置文本的大小

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

p,h3 {
    font-size: 30px;
}
font-weight 字体粗细

设置文本的粗细 

h1 {font-weight: normal;}
div {font-weight: bold;}
p {font-weight: 900;}
 font-style 字体样式

指定文本的字体样式 

font-family 

font-family属性指定一个元素的字体

温馨提示

每个值用逗号分开

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

 背景属性

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

1,background-color 背景颜色

 该属性设置背景颜色

<div class="box1">
</div>

.box1 {
    width: 400px;
    height: 400px;
    background-color: red;
}
2,background-image 背景图像

设置元素的背景图像

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

<div class="box2"></div>

.box2 {
    width: 400px;
    height: 400px;
    background-image: url("./img/1.jpg");
}
 3,background-repeat 平铺

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

作用

设置背景平铺；平铺的意思，可以理解为，如果盒子很大，背景图片没那么大，设置了平铺，就能够铺满盒子（的某个方向） 

 4,background-size 背景大小

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

一般来说，第三种使用是最多的 

<div class="box2"></div>

.box2 {
    width: 200px;
    height: 200px;
    background-image: url("./img/1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
 5,background-position 背景位置

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

文本属性 
1,text-align 水平对齐

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

2,text-decoration

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

h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
3,text-transform 

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

 4,text-indent

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

p {
    text-indent:50px;
}

温馨提示

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

表格属性 

使用CSS可以使HTML表格更美观

表格边框

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

table,td{
    border: 1px solid yellowgreen;
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

2.2.5 关系选择器

后代选择器

定义：选择所有被E元素包含的F元素，中间用空格隔开

语法

E F{}
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <div>
        <ol>
            <li>列表4</li>
            <li>列表5</li>
        </ol>
    </div>
</ul>

ul li{
    color: red;
}
子代选择器

定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

E>F{}
<div>
    <a href="#">子元素1</a>
    <p><a href="#">我不好</a></p>
    <a href="#">子元素2</a>
</div>

div>a{
    color: red;
}

相邻兄弟选择器

定义：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

语法

E+F{}
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>

h3+p{
    color: red;
}

通用兄弟选择器

定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

语法

<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>

h3~p{
    color: red;
}

2.2.6 盒子模型

概念

所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

  1. margin（外边距）- 清除边框外的区域，外边距是透明的
  2. border（边框）- 围绕在内边距和内容外的边框
  3. padding（内边距）- 清除内容周围的区域，内边距是透明的（两个值：第一个值上下，第二个值左右）
  4. content（内容）- 盒子的内容，显示文本和图形

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离

2.2.7 弹性盒模型

定义

弹性盒子是CSS3的一种新的布局模式

CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素 拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间

CSS3弹性盒内容

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成

弹性容器通过设置display属性的值为flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素 

温馨提示

弹性容器外及弹性子元素内事正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

温馨提示

默认弹性盒里内容横向摆放 

父元素上的属性

display 属性

display:flex;开启弹性盒

display:flex;属性设置后子元素默认水平排列

flex-direction属性

定义

flex-direction 属性指定了弹性子元素在父容器中的位置

语法

flex-direction:row|row-reverse|column|column-reverse;
  1. row: 横向从左到右排列（左对齐），默认的排列方式
  2. row-reverse: 反转横向排列（右对齐，从后往前排，最后一项排在最前面）
  3. column：纵向排列
  4. column-reverse: 反转纵向排列，从后往前排，最后一项排在最上面 

 justify-content 属性

定义

内容对齐 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

语法

justify-content: flex-end|center|flex-start;
  1. flex-start 居上摆放
  2. flex-end 局下摆放
  3. center 居中摆放

align-items 属性

定义

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法

align-items: flex-start|center|flex-end;
  1. flex-start 居左摆放
  2. flex-end 居右摆放
  3. center 居中摆放 
子元素上的属性 

flex-grow/flex

flex-grow 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为0，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。

0.1即10%,1即100%,超出按100%

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>


<style>
    .container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        background-color: #555555;
    }
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        flex: 2;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        flex: 2;
    }
    .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        flex: 1;
    }
</style>

2.2.8 文档流

文档流是文档中可显示对象在排列是所占用的位置/空间

例如：块元素自上而下摆放，内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

  1. 高低不齐，底边对齐
  2. 空白折叠现象
    1. 无论多少个空格，换行，tab,都会折叠为一个空格
    2. 无论我们想让img标签之间没有空隙，不行紧密连接
文档流产生的问题

高低不齐，底边对齐

空格折叠

 

<span>我是文本              内容</span>
<img src="img/1.jpg" alt="美女">

img{
    width: 300px;
    height: 300px;
}

 元素无空隙

 脱离文档流

 使一个元素脱离标准文档流有三种方式：浮动，绝对定位，固定定位

浮动

增加一个浮层来放置内容

浮动的定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动。

 浮动原理

  1. 浮动以后使元素脱离了文档流
  2. 浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所有会出现折叠现象

<div class="box"></div>
<div class="container"></div>

.box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    float: left;
}
.container {
    width: 400px;
    height: 400px;
    background-color: blueviolet;
}

 元素向右浮动

<div class="box"></div>
<div class="container"></div>

.box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    float: right;
}
.container {
    width: 400px;
    height: 400px;
    background-color: blueviolet;
}

所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右 

当容器不足时

当容器不足以横向摆放内容时候， 会在下一行摆放

 清除浮动

 

浮动副作用

当元素设置float浮动后，该元素就会访问文档流并向左/向右浮动

  1.  浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    width: 500px;
    background-color: #888;
}
.box{
    width: 100px;
    height: 100px;
    background-color: rgb(82, 82, 165);
    margin: 5px;
    float: left;
}

清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种

  1. 父元素设置高度
  2. 受影响的元素增加clear属性
  3. overflow清除浮动
  4. 伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    width: 500px;
    height: 500px;
    background-color: #888;
}
.box{
    width: 100px;
    height: 100px;
    background-color: rgb(82, 82, 165);
    margin: 5px;
    float: left;
}

 

受影响的元素增加clear属性

css中添加这个就行了

clear: both; 

overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面加：overflow: hidden;clear: both;

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="text"></div>
</div>


.container{
    width: 500px;
    overflow: hidden;
    clear: both;
    background-color: #888;
}
.box{
    width: 100px;
    height: 100px;
    background-color: rgb(82, 82, 165);
    margin: 5px;
    float: left;
}
.text{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    clear: both;
}
定位 

position属性指定了元素的定位类型

其中，绝对定位和固定定位会脱离文档流 

设置定位之后：可以使用四个方向值进行调整位置：left，top，right，bottom

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行调整的，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

相对定位

相对定位（Relative Positioning）是一种CSS定位方式，通过position: relative来实现。相对定位的元素相对于其正常位置进行偏移，而不会影响其他元素的布局。

绝对定位

绝对定位（Absolute Positioning）是一种CSS定位方式，通过position: absolute来实现。绝对定位的元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的根元素（通常是<html>或<body>）进行定位。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(51, 156, 194);
            position: absolute;
            left: 50px;
            top: 50px;
        }
</style>
固定定位

固定定位（Fixed Positioning）是一种CSS定位方式，通过position: fixed来实现。使用固定定位的元素相对于浏览器窗口进行定位，而不是相对于包含它的父元素或其他元素。固定定位的元素在页面滚动时仍然保持在浏览器窗口的相同位置。

固定定位的特点

  1. 相对于浏览器窗口: 固定定位的元素总是相对于浏览器窗口进行定位，而不是相对于父元素。
  2. 不随滚动而移动: 页面内容滚动时，固定定位的元素保持在其指定的位置，不会跟随页面内容滚动。
  3. 覆盖其他内容: 固定定位的元素通常会覆盖页面上的其他内容，因此需要注意其层叠顺序（z-index）。
<div class="box1"></div>
<div class="box2"></div>

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    left: 100px;
    top: 100px;
}
.box2{
    width: 400px;
    height: 400px;
    background-color: blueviolet;
}
 z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。

<div class="box1"></div>
<div class="box3"></div>

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 100;
}
.box3{
    width: 100px;
    height: 100px;
    background-color: rgb(51, 156, 194);
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 50;
}

2.2.9 CSS3新版本 

1.圆角

使用CSS3 border-radius属性，你可以给任何元素制作“圆角”

border-radius属性，可以使用以下规则：

  1. 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
  3. 二个值：第一个值为左上角和右下角，第二个值为右上角和左下角
  4. 一个值：四个角相同
<div></div>

div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    border-radius: 50%; /* 设置为圆形 */
}
2,阴影 

box-shadow 向框添加一个或多个阴影

box-shadow: v-shadow blur spread color;

<div class="box"></div>


.box{
    width: 400px;
    height: 400px;
    background-color: blueviolet;
    box-shadow: v-shadow blur spread color;
    margin: auto;
    box-shadow: 10px 10px 20px yellowgreen;
}
 3,动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

使用 @keyframes 规则，你可以创建动画

name: 动画名称，开发人员自己命名；

percent: 为百分比值，可以添加多个百分比值；

执行动画

animation: name duration timing-function delay iteration-count direction;

 

<div></div>

div{
    width: 200px;
    height: 200px;
    background-color: red;
    animation: myAnim 3s linear 0s infinite;
}
div:hover{
    animation-play-state: paused; /* 鼠标悬停停止动画 */
}
@keyframes myAnim {
    0%{
        width: 200px;
        background-color: red;
    }
    50%{
        width: 400px;
        background-color: yellow;
    }
    100%{
        width: 200px;
        background-color: blue;
    }
}

 呼吸效果

<div class="box"></div>

<style>
        
        .box{
            width: 500px;
            height: 500px;
            margin: 40px auto;
            background-image: url(./img/2.jpg);
            background-size: cover;
            border-radius: 50%;

            box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            animation: breathe 2.7s ease-in-out infinite alternate;
        }

        @keyframes breathe {
            0%{
                opacity: 0.2; /* 透明度 1是不透明 0.2是20%的透明度 */
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            50%{
                opacity: 0.5;
                box-shadow: 0 1px 2px rgba(34, 215, 94, 0.76);
            }
            100%{
                opacity: 1;
                box-shadow: 0 1px 30px rgb(51, 117, 224);
            }
        }
</style>
 4.媒体查询

媒体查询能使页面在不同的终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

参数解释

  1. width=device-width 宽度等于当前设备的宽度
  2. initial-scale 初始的缩放比例（默认设置为1.0）
  3. maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
  4. user-sscalable 用户是否可以手动缩放（默认设置为no） 

媒体查询语法

<div class="box"></div>


.box{
    width: 500px;
    height: 500px;
}
@media screen and (max-width: 768px) {
    .box{
        background-color: blue;
    }
}
@media screen and (min-width: 768px) and (max-width: 996px) {
    .box{
        background-color: aqua;
    }
}
@media screen and (min-width: 996px) {
    .box{
        background-color: red;
    }
}
 5,雪碧图

CSS Sprite也叫CSS精灵图，CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去 

优点

  1. 减少图片的字节
  2. 减少网页的http请求，从而大大的提高页面的性能

原理

  1. 通过Background-image引入背景图片
  2. 通过background-position把背景图片移动到自己需要的位置
库库林_沙琪马
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础语句
weixin_53968665的博客
12-25 1392
CSS
CSS——CSS基础知识
流楚丶格念的博客
06-26 8041
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
书启鸿蒙知秋枫
12-28 5980
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
CSS基础知识
ashfiqa的博客
01-21 2128
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3403
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2717
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1899
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 3468
CSS基础入门，详细总结
项目CSS基础样式模板
小琳爱分享的博客
07-23 1172
项目CSS基础样式模板
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础代码
07-02
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css 基础样式 base.css
04-28
css基础样式
CSS的重绘和重排是什么？
沐爸的博客
08-12 1087
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 973
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 180
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
css-浮动
最新发布
m0_73882020的博客
08-16 361
不再保留原先的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值