前端 --- CSS

已于 2022-04-18 17:20:20 修改
阅读量4.9k 收藏 191
点赞数 68
分类专栏： 前端 文章标签： 前端 html html5 css css3
于 2022-04-14 12:23:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/124112461
版权

文章目录

1. CSS

1.1 什么是CSS

CSS的英文名为 Cascading Style Sheet,中文为层叠样式表
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

1.2 CSS 的基本语法

选择器+{
	属性: 属性值;
}

例如:

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

<p>你好</p>

1.3 CSS的使用方式

① 直接定义标记的 style 属性

    <p style="color:red; font-size: 20px;">你好 你好 你好</p>

在这里插入图片描述

② 定义内部样式表

    <style>
        p{
            color:red;
            font-size: 20px;
        }
    </style>
    <p>你好 你好 你好</p>

在这里插入图片描述

③ 嵌入外部样式表

    <style>
        @import url(1.css);
    </style>
    <p>你好 你好 你好</p>

1.css

p {
    color: red;
    font-size: 20px;
}

在这里插入图片描述

④ 链接外部样式表

    <link rel="stylesheet" href="1.css">
    <p>你好 你好 你好</p>

1.css

p {
    color: red;
    font-size: 20px;
}

在这里插入图片描述

2. 选择器的种类

2.1 基础选择器

由单个选择器构成的

① 标签选择器

    <style>
        p {
            color: red;
        }
        div {
            color: pink;
        }
    </style>
    <p>HTML</p>
    <p>HTML</p>
    <div>CSS</div>
    <div>CSS</div>

在这里插入图片描述

② 类选择器

    <style>
        .red {
            color: red;
        }
    </style>
    <p class="red">HTML</p>
    <p>HTML</p>
    <div>CSS</div>
    <div>CSS</div>

在这里插入图片描述

③ id 选择器

    <style>
        #red {
            color: red;
        }
    </style>
    <p id="red">HTML</p>
    <p>HTML</p>

在这里插入图片描述

④ 通配符选择器

使用 * 的定义, 选取所有的标签

    <style>
        * {
            color: red;
        }
    </style>
    <p>HTML</p>
    <p>HTML</p>
    <div>CSS</div>
    <div>CSS</div>

在这里插入图片描述

2.2 复合选择器

① 后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}
  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例1
    <style>
        ul li {
            color: pink;
        }
    </style>
    <ul>
        <li>你好!</li>
        <li>你好!</li>
        <li>你好!</li>
    </ul>

在这里插入图片描述

代码示例2
    <style>
        ul a {
            color: pink;
        }
    </style>
    <ul>
        <li><a href="http://www.baidu.com">你好!</a></li>
        <li>你好!</li>
        <li>你好!</li>
    </ul>

在这里插入图片描述

代码示例3
    <style>
        .one a {
            color: pink;
        }
    </style>
    <ul class="one">
        <li><a href="http://www.baidu.com">你好!</a></li>
        <li>你好!</li>
        <li>你好!</li>
    </ul>

在这里插入图片描述

② 子选择器

和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }
  • 使用大于号分割
  • 只选亲儿子, 不选孙子元素
代码示例1
    <style>
        .cat>ul>li>a {
            color: red;
        } 
    </style>
    <div class="cat">
        <a href="#">不好</a>
        <ul>
            <li><a href="#">你好</a></li>
            <li><a href="#">你好</a></li>
        </ul>
    </div>

在这里插入图片描述

③ 并集选择器

用于选择多组标签.

元素1, 元素2 { 样式声明 }
  • 通过 逗号 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行.
代码示例1
    <style>
        div,h3 {
            color: red;
        }
    </style>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul>

在这里插入图片描述

代码示例2
    <style>
        div,h3,ul>li {
            color: red;
        }
    </style>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul>

在这里插入图片描述

④ 伪类选择器

1) 链接伪类选择器
标记描述
a:link选择未被访问过的链接
a:visited选择已经被访问过的链接
a:hover选择鼠标指针悬停上的链接
a:active选择活动链接(鼠标按下了但是未弹起)
    <style>
        /* 未被访问过的链接是黑色 */
        a:link {
            color: black;
            /* 去掉下划线 */
            text-decoration: none;
        }
        /* 被访问过之后是红色 */
        a:visited {
            color: red;
        }
        /* 鼠标悬停的时候是蓝色 */
        a:hover {
            color: blue;
        }
        /* 鼠标按下但没松的时候是绿色 */
        a:active {
            color: green;
        }
    </style>
    <a href="http://www.sougou.com">你好</a>

在这里插入图片描述

2) :focus 伪类选择器

选取获取焦点的 input 表单元素.

    <style>
        div>input:focus {
            color: red;
        }
    </style>
    <div>
        <input type="text">
    </div>

这里此时被选中的表单的字体就会变成红色
在这里插入图片描述

3. 常用元素属性

3.1 字体属性

① 字体设置 font-family

注: 字体的名称可以用中文,但是不建议.

    <style>
        body {
            font-family:'黑体';                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        }
    </style>
    <p>你好 你好 你好</p>

在这里插入图片描述

② 字体大小 font-size

    <style>
        .p1 {
            font-size: large;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        }
        .p2 {
            font-size: 20px;
        }
    </style>
    <p class="p1">你好 你好 你好</p>
    <p class="p2">不好 不好 不好</p>

在这里插入图片描述

③ 字体粗细 font-weight

值描述
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100,200,300,400,500,
600,700,800,900		定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
    <style>
        .p1 {
            font-weight: bold;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
        }
        .p2 {
            font-weight: 100;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        }
    </style>
    <p class="p1">你好 你好 你好</p>
    <p class="p2">不好 不好 不好</p>

在这里插入图片描述

④ 字体样式 font-style

值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个倾斜的字体样式。
    <style>
        .p1 {
            font-style: italic;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
        }
        .p2 {
            font-style: oblique;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
        }
    </style>
    <p class="p1">你好 你好 你好</p>
    <p class="p2">不好 不好 不好</p>

在这里插入图片描述

3.2 文本属性

① 文本颜色 color

color 属性值的写法:

  • 颜色的单词
  • #+ 8位16进制的形式
  • RGB方式
    <style>
        .one {
            color: red;
        }
        .two {
            color: #00ff00;
        }
        .three {
            color: rgb(0,0,255);
        }
    </style>
    <div class="one">你好 你好 你好</div>
    <div class="two">你好 你好 你好</div>
    <div class="three">你好 你好 你好</div>

在这里插入图片描述

② 文本对齐 test-align

值描述
left把文本排列到左边。默认值：由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
    <style>
        .one {
            text-align: left;
        }
        .two {
            text-align: right;
        }
        .three {
            text-align: center;
        }
    </style>
    <div class="one">你好 你好 你好</div>
    <div class="two">你好 你好 你好</div>
    <div class="three">你好 你好 你好</div>

在这里插入图片描述

③ 文本装饰 text-decoration

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
    <style>
        .one {
            text-decoration: underline;
        }
        .two {
            text-decoration: line-through;
        }
        .three {
            text-decoration: overline;
        }
        .five {
            text-decoration: none;
        }
    </style>
    <div class="one">你好 你好 你好</div><br/>
    <div class="two">你好 你好 你好</div><br/>
    <div class="three">你好 你好 你好</div><br/>
    <a href="http://www.baidu.com" class="five">你你你你你好好好好好</a>

在这里插入图片描述

④ 文本缩进 text-indent

输入的属性值可以是长度单位,可以是百分比单位
注: 要是想要首行缩进2格,可以为2em

    <style>
        .one {
            text-indent: 50%;
        }
        .two {
            text-indent: 3em;
        }
    </style>
    <div class="one">你好 你好 你好</div><br/>
    <div class="two">你好 你好 你好</div><br/>

在这里插入图片描述

⑤ 行距 line-height

值描述
normal默认。设置合理的行间距。
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
    <style>
        .one {
            line-height: 30px;
        }
        .two {
            line-height: 20%;
        }
    </style>
    <div class="one">你好<br/>你好<br/>你好</div><br/>
    <div class="two">你好<br/>你好<br/>你好</div>

在这里插入图片描述

3.3 背景属性

① 背景颜色 background-color

    <style>
        .one {
            background-color: red;
        }
        .two {
            background-color: #00ff00;
        }
        .three {
            background-color: transparent;
        }
    </style>
    <div class="one">你好</div>
    <div class="two">你好</div>
    <div class="three">你好</div>

在这里插入图片描述

② 背景图片 background-image:url()

    <style>
        body {
            background-image: url(1.jpg);
            height: 200px;
        }
    </style>

在这里插入图片描述

③ 背景平铺 background-repeat

值描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
    <style>
        .one {
            background-image: url(male.png);
            height: 300px;
            background-repeat: repeat;
        }
        .two{
            background-image: url(male.png);
            height: 300px;
            background-repeat: no-repeat;
        }
        .three{
            background-image: url(male.png);
            height: 300px;
            background-repeat: repeat-x;
        }
        .four{
            background-image: url(male.png);
            height: 300px;
            background-repeat: repeat-y;
        }
    </style>
    <div class="one">你好</div>
    <div class="two">你好</div>
    <div class="three">你好</div>
    <div class="four">你好</div>

在这里插入图片描述

④ 背景位置 background-position: x y

值描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos        第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。
    <style>
        .one {
            background-image: url(male.png);
            height: 300px;
            background-position: top right;
        }
        .two{
            background-image: url(male.png);
            height: 300px;
            background-position: center right;
        }
        .three{
            background-image: url(male.png);
            height: 300px;
            background-position: 20px 80px;
        }
        .four{
            background-image: url(male.png);
            height: 300px;
            background-position: 20% 80%;
        }
    </style>
    <div class="one">你好</div>
    <div class="two">你好</div>
    <div class="three">你好</div>
    <div class="four">你好</div>

在这里插入图片描述

⑤ 背景尺寸 background-size

属性值:length|percentage|cover|contain

    <style>
        .one {
            background-image: url(male.png);
            height: 300px;
            background-size: 50px;
        }
        .two{
            background-image: url(male.png);
            height: 300px;
            background-size: 50%;
        }
        .three{
            background-image: url(male.png);
            height: 300px;
            background-size:cover
        }
        .four{
            background-image: url(male.png);
            height: 300px;
            background-size: contain;
        }
    </style>
    <div class="one">你好</div>
    <div class="two">你好</div>
    <div class="three">你好</div>
    <div class="four">你好</div>

在这里插入图片描述

3.4 圆角矩形

基本用法

border-radius: length;

length表示内切圆的半径,length越大,弧度越大

示例1

    <style>
        div { 
            font-size: 50px;
            width: 200px;
            height: 300px;
            border: 2px solid green;
            border-radius: 20px;
        }
    </style>
    <div>哈喽</div>

在这里插入图片描述

生成圆形

让 border-radius 的值为正方形宽度的一半即可

    <style>
        div { 
            font-size: 50px;
            width: 300px;
            height: 300px;
            border: 2px solid green;
            border-radius: 50%;
        }
    </style>
    <div>哈喽</div>

在这里插入图片描述

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

    <style>
        div { 
            font-size: 50px;
            width: 200px;
            height: 300px;
            border: 2px solid green;
            border-radius: 150px;
        }
    </style>
    <div>哈喽</div>

在这里插入图片描述

展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

border-radius:2em;
等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等价于

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

注: CSS 中顺序一般都是按照顺时间顺序的.

4. 元素的显示模式

4.1 块级元素

常见的元素: h1~h6 p div ul ol li …

特点

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制.
  • 宽度默认是父级元素宽度的 100% (和父元素一样宽)
  • 是一个容器(盒子), 里面可以放行内和块级元素.

代码示例

    <style>
        .one .parent{
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .one .child{
            /* 这里width没设置,默认是父级的 */
            height: 200px;
            background-color: blue;
        }
    </style>
    <div class="one">
        <div class="parent">
            <div class="child">
                child1
            </div>
        </div>
    </div>

在这里插入图片描述

注意事项

  • 文字类的元素内不能使用块级元素
  • p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

4.2 行内元素/内联元素

常见的元素:a strong b em i del u span …

特点

  • 不独占一行, 一行可以显示多个
  • 设置高度, 宽度, 行高无效
  • 左右外边距有效(上下无效). 内边距有效.
  • 默认宽度就是本身的内容
  • 行内元素只能容纳文本和其他行内元素, 不能放块级元素

代码示例:

    <style>
        span{
            width: 300px;
            height: 500px;
            background-color: red;
        }
    </style>
    <span>你好~</span>

在这里插入图片描述

注意事项

  • a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).
  • a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素

4.3 行内元素和块级元素的区别

  • 块级元素独占一行, 行内元素不独占一行
  • 块级元素可以设置宽高, 行内元素不能设置宽高.
  • 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

4.4 改变显示模式

  1. display: block 改成块级元素 [常用]
  2. display: inline 改成行内元素 [很少用]
  3. display: inline-block 改成行内块元素

5. 盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”

这个盒子由这几个部分构成:

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

在这里插入图片描述

5.1 边框

基础属性

描述标记
粗细border-width
样式border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色border-color

代码示例1

    <style>
        div {
            height: 200px;
            width: 200px;
            border-width: 10px;
            border-style: solid;
            border-color: chartreuse;
        }
    </style>
    <div>你好</div>

在这里插入图片描述
以上代码中可以简写.没有顺序要求
在这里插入图片描述

边框会撑大盒子

在这里插入图片描述
设置200 * 200 变成了220 * 220
因为算上了边框的距离
解决办法:

<style>
        /* 这里用通配符解决了问题 */
        * {
            box-sizing: border-box;
        }
        div {
            height: 200px;
            width: 200px;
            border: 10px solid green;
        }
    </style>
    <div>你好</div>

在这里插入图片描述

5.2 内边距

padding设置内容和边框之间的距离

基础属性

标记描述
padding-top上
padding-bottom下
padding-left左
padding-right右

代码示例

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px solid green;
            padding-top: 20px;
            padding-left: 10px;
        }
    </style>
    <div>你好</div>

在这里插入图片描述

复合写法

写法描述
padding: 5px;表示四个方向都是 5px
padding: 5px 10px;表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px;表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px;表示 上5px, 右10px, 下20px, 左30px (顺时针)

5.3 外边距

基础属性

标记描述
margin-top上
margin-bottom下
margin-left左
margin-right右

代码示例

    <style>
        div {
            background-color: green;
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }
    </style>
    <div>你好</div>

在这里插入图片描述

复合写法

写法描述
margin: 10px;// 四个方向都设置
margin: 10px 20px;// 上下为 10, 左右 20
margin: 10px 20px 30px;// 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px;// 上 10, 右 20, 下 30, 左 40

块级元素水平居中

三种写法

	margin-left: auto; margin-right: auto;
	margin: auto;
	margin: 0 auto;

代码示例:

    <style>
        div {
            background-color: green;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
    <div>你好</div>

在这里插入图片描述
注意事项:

  1. 这个水平居中的方式和 text-align 不一样.
    margin: auto 是给块级元素用得到.
    text-align: center 是让行内元素或者行内块元素居中的.
  2. 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

去除浏览器默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.
为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式

* {
	margin: 0;
	padding: 0;
}

在这里插入图片描述

6. 弹性布局

6.1 flex 布局基本概念

flex是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

基础概念:

  • 被设置为 display:flex 属性的元素, 称为 flex container
  • 它的所有子元素立刻称为了该容器的成员, 称为 flex item
  • flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
    在这里插入图片描述
    注:当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align都会失效.

6.2 常用属性

① justify-content

设置主轴上的子元素排列方式.

值描述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器中央。
space-between项目在行与行之间留有间隔。
space-around项目在行之前、行之间和行之后留有空间。
代码示例: space-around
    <style>
        .one {
            width:100%;
            height: 300px;
            background-color:hotpink;
            display: flex;
            justify-content: space-around;
        }
        .two,.three,.four {
            width: 40px;
            height: 100px;
            background-color:lawngreen;
        }
    </style>
    <div class="one">
        <div class="two">你好</div>
        <div class="three">你好</div>
        <div class="four">你好</div>
    </div>

在这里插入图片描述

代码示例: space-between
    <style>
        .one {
            width:100%;
            height: 300px;
            background-color:hotpink;
            display: flex;
            justify-content: space-between;
        }
        .two,.three,.four {
            width: 40px;
            height: 100px;
            background-color:lawngreen;
        }
    </style>
    <div class="one">
        <div class="two">你好</div>
        <div class="three">你好</div>
        <div class="four">你好</div>
    </div>

在这里插入图片描述

② align-items

值描述
stretch默认。项目被拉伸以适合容器。
center项目位于容器的中央。
flex-start项目位于容器的开头。
flex-end项目位于容器的末端。
space-between行均匀分布在弹性容器中
space-around行均匀分布在弹性容器中,两端各占一半
代码示例:
    <style>
        .one {
            width:100%;
            height: 300px;
            background-color:hotpink;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .two,.three,.four {
            width: 40px;
            height: 100px;
            background-color:lawngreen;
        }
    </style>
    <div class="one">
        <div class="two">你好</div>
        <div class="three">你好</div>
        <div class="four">你好</div>
    </div>

在这里插入图片描述

代码示例:
    <style>
        .one {
            width:100%;
            height: 300px;
            background-color:hotpink;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }
        .two,.three,.four {
            width: 40px;
            height: 100px;
            background-color:lawngreen;
        }
    </style>
    <div class="one">
        <div class="two">你好</div>
        <div class="three">你好</div>
        <div class="four">你好</div>
    </div>

在这里插入图片描述
注: align-items只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

独一无二的哈密瓜
关注
  • 68
    点赞
  • 踩
  • 191
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 29
    评论
专栏目录
css计算机
hushan团队
09-07 228
css计算机 今天给大家分享一个css的计算机,如果不想複製粘贴，滑到最下面下载就行了。 文件目录： 计算机 —计算机.html —css ——style.css 首先是计算机.html的代码： <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" href="css/st
前端-CSS入门.pdf
08-21
前端-CSS入门.pdf
web前端——css基础
m0_70640261的博客
12-29 265
css基础
Next--css
冷月心的博客
09-08 888
Next--css
web前端 --- CSS（1）-- 选择器
weixin_62443409的博客
04-23 8671
【代码】web前端 --- CSS（1）
前端练习-CSS布局
qq_42385482的博客
02-08 1763
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
web前端-css边框（border）
苏凉.py的博客
05-27 6074
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性 css边框属性 css的border属性允许您指定元素边框的样式、宽度和颜色。 css边框样式 border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..
前端聚光灯效果-(css-doodle)
热门推荐
weixin_62650212的博客
12-15 1万+
css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。下面是一个使用css-doodle库实现的一个聚光灯的效果。效果如下：（点击可以刷新）
前端-HTML-CSS字体设置-宋体、黑体、幼圆、隶书
qq_50851938的博客
11-06 1万+
字体设置、宋体、黑体、幼圆、隶书
前端-css-js，屏幕滑动效果
tl110110tl的专栏
04-07 2089
屏幕滑动效果
2.前端笔记-CSS-字体属性
虽然但是
11-23 5136
字体的大小（font-size，带单位px）、字体样式(font-style斜体、正常)、font-weight(字体粗细（不带单位）)、font-family(字体系列微软雅黑)
前端-HTML-CSS-JS-个人网页制作实例
06-16
个人网页制作实例、HTML-CSS-JS、天气之子主题风格、开源创作、个人兴趣
css-sprite使用详解
09-25
主要介绍了css-sprite的使用详解,css-sprite是一个经常被用来合并前端图片的工具.需要的朋友可以参考下
前端-css-reset.css
09-19
前端-css-reset.css，做web项目时可以参考使用的重置样式表，包含清空浏览器的默认样式、设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族、页面布局、背景颜色样式、颜色、设置超链接的样式、...
前端基础-CSS注释
01-20
三、css注释 语法：/*注释的内容*/ 四、css基本选择器 1.标签选择器 通过标签来选择元素，标签{css样式} 示意图 2.id选择器 通过id属性来选择元素，#id名{css样式} 示意图 注意：id选择要保证...
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 325
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 195
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 748
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 95
练习JS的实用案例
css-in-css
02-05
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。 在传统的CSS开发中，样式是全局共享的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独一无二的哈密瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值