CSS2基础（part-2 继续part-1）

于 2024-08-23 12:26:43 发布
阅读量352 收藏 7
点赞数 23
分类专栏： CSS合集 前端 文章标签： 前端 css vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhaonue_w/article/details/141462702
版权

CSS2基础

基础

简介

【全称】Cascading Style Sheets，又名层叠样式表

  • 层叠：一层一层涂上去
  • 表：列表
  • 样式：如文字大小，颜色，元素宽高等。

CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

语言类型

标记语言，为HTML结构美化样式，实现**语义与效果的分离**，更好地美化网页，优化网页结构

作用于HTML的方式

行内样式（不推荐）

语法：

<!--写在标签中的style中-->
<body>
    <h1 style="color:skyblue;">title</h1>
</body>

缺点：

  • 工作量大，效率低下
  • html和css耦合性太高，css使html结构与样式分离的作用微乎其微
内部样式

语法：

<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        h1{
            color: skyblue;
        }
        h2{
            color: greenyellow;
        }
    </style>
</head>
<body>

优点：

  • 结构和样式已经初步分开，代码可以进行服用

缺点：

  • 需要复制到另一个html文件才可以实现样式复用，耗费时间

[!NOTE]

一开始写CSS样式的时候，可以使用内部样式，不用再开一个.css文件来赋予结构样式，

到后来熟练了可以使用外部样式，写在**.css**文件中

外部样式

语法：

<!--HTML文件-->
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" href="../CSS/03.css">
    <!--head中写link来连接外部样式表-->
    <!--rel:关系  href:来源-->
</head>

/*CSS文件*/
h1{
    color: skyblue;
}
h2{
    color: gray;
}

最常使用的方式，实际开发几乎都使用外部样式表

优点：

  • 当第一次通过浏览器渲染后，CSS样式就会因为与.html文件的分离而进行缓存，下次渲染则可以提高访问速度

样式的优先级

顺序：

行内样式 > 内部样式 = 外部样式

attention

  • 遵循“后来者居上”的原则{编写顺序的先后}
  • 相当于涂鸦，涂了第二层，第一层就会看不见了

语法规范

结构：

选择器找到想要更改样式的元素
声明块一个或多个声明（声明：[属性名： 属性值；]）
h2{
    color: gray;
}

代码风格

风格作用
展开风格开发时推荐，便于维护和调试
紧凑风格项目上线时推荐，可以减小文件体积，以节约网络流量，同时使打开网页的速度更快

CSS选择器

基本选择器

通配选择器

作用：

选中所有的HTML元素（清除样式的时候有用）

* {
	color: red;
}
元素选择器

作用：

为某种元素统一设置，无法实现同类型的差异化

标签名 {
    属性名: 属性值;
}
类选择器

作用：

通过元素中的class的属性值来进行可以自己分类的样式分配

元素中的class属性的属性值可以有多个，用空格隔开

class属性的属性值尽量为字母+数字，用-连接，避免纯数字的出现

/*假设有一个元素h1，它的class属性的属性值为skyblue*/
.skyblue {
    color: skyblue;
}
ID选择器

作用：

选中唯一的元素通过id属性的属性值（其中的原理是不同的元素，id属性的属性值必须不同）

/*假设有一个元素h1，它的id属性的属性值为special*/
#special {
    color: skyblue;
}

复合选择器

交集选择器

作用：

选中同时符合多个条件的元素

选择器1选2选3 {
    color: skyblue;
}
/*比如p.blue 就是说class属性的属性值为blue的p标签（双重筛选）*/

[!NOTE]

  • 有标签名必须写在前面
  • 不可能同时出现两个元素选择器
并集选择器

作用：

选中多个选择器对应的元素

h2,
h3,
p {
            font-size: large;
        }
/*
选择器1，
选择器2，
选择器3 {
 属性名： 属性值；
}

*/
  • 一般竖着写
  • 集体声明，可以缩小样式表的体积
HTML元素之间的关系
  • 父元素
  • 子元素
  • 祖先元素（爸爸也算是祖先）
  • 后代元素（儿子也算是后代）
  • 兄弟元素

为后面的后代选择器等选择器做知识储备

后代选择器（id，类也可）

作用：

选中指定元素中，符合要求的后代元素

<style>
        ul li {
            color: skyblue;
            font-size: large;
        }
    </style>
<ul>
        <li>l</li>
        <li>o</li>
        <li>v</li>
        <li>e</li>
        <li>
            <a href="#">love</a>
        </li>
        <li>
            <ul>
                <li>1</li> <!--这个也可以被选中-->
            </ul>
        </li>
    </ul>

[!TIP]

  • 最后选中的是后代，不包括祖先
  • 须符合html的嵌套要求 （可以跨代寻找）
  • 子代和孙子辈以及等等可以同时兼顾
子代选择器

作用：

选中指定元素中符合要求的子代元素

选1>选2>选3 {
 color： skyblue；
}
/*
选择器可以不从最外面开始找寻元素
*/
兄弟选择器

作用：

选中指定元素后，符合条件的相邻兄弟元素

分类：

分类语法作用
相邻选1+选2向下找同代，第一个如果是选2，则赋予样式
通用选1~选2向下找通带，如果是选2，则赋予样式，可以不止一个
<style>
		ul+ol {
            color: skyblue;
        }
        p+h2 {
            color: yellow;
        }
        h2~h3 {
            color: aquamarine;
            font-size: large;
        }
</style>
<body>
    <div>
        <ul>
            <li>love</li>
            <li>like</li>
        </ul>
        <ol>
            <li>long</li>
            <li>lonely</li>
        </ol>
        <p>paragrah</p>
        <h3>title333</h3>
        <h2>title2</h2>
        <h3>title3</h3>
        <h3>title33</h3>
</body>
属性选择器

作用：

选中属性值符合一定要求的元素

 /* 第一种写法，选中具有相同属性的元素 */
        [title] {
            color: skyblue;
        }
        /* 第二种写法，选中属性以及属性值都相同的元素 */
        [title = "1"] {
            color: aquamarine;
        }
        /* 第三种写法，选中属性相同，且属性值开头相同的元素 */
        [title^="a"] {
            color: yellow;
        }
        /* 第四种写法，选中属性相同，且属性值结尾相同的元素 */
        [title$="e"] {
            font-size: larger;
        }
        /* 第五种写法，选中属性相同，且属性值中包含部分值的元素 */
        [title*="1"] {
            color: brown;
        }
伪类选择器

概念解析：

不是真的类class，而是元素的一种状态

分类：

动态伪类意思结构伪类意思
link（超链接独有）尚未连接first-child第一个孩子
visted（超链接独有）连接过last-child最后一个孩子
hover鼠标悬停nth-child（n）第n个孩子
active元素激活（按下鼠标不松开）first-of-type第一个同类型孩子
focus获取焦点（表单元素）last-of-type最后一个同类型孩子
nth-of-type（n）第n个同类型孩子
结构伪类补充

**1.**关于括号中的n

  • 0或不写：什么都不选
  • n：选中所有（几乎不用）
  • 1~正无穷：选中对应序号
  • 2n或even：选中序号为偶数
  • 2n+1或odd：选中序号为奇数
  • -n+3：选中前三个

原理：an + b

**2.**细节：

类似于立嫡立长，即取第一个儿子，孙子…(同时)

例子：

div p:first-child

意思是找div中的第一个儿子，孙子…是不是p，是就赋予样式

p:first-child

意思是找body中的第一个儿子，孙子…是不是p，是就赋予样式

否定伪类

作用：

排除满足括号中条件的元素

语法：

:not(选择器)

p:not(:first-child) {
            color: skyblue;
        }
UI伪类

分类：

what意思
checked被选中的复选框或单选框
enable可用的表单元素
disabled不可用的表单元素
 /* 选中的是被选中的复选框和单选框 */
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的input元素 */
        input:disabled {
            background-color: gray;
        }
        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: skyblue;
        }
目标伪类（了解）

作用：

选中指定的锚点元素

/* 选中锚点指向的元素 */
        div:target{
            background-color: gray;
        }
语言伪类（了解）

作用：

根据指定的语言选择元素

 div:lang(en) {
            color: skyblue;
        }
伪元素选择器

作用：

选中元素中的一些特殊位置（在元素里）

分类：

what意思
first-letter第一个文字
first-line第一行文字
selection被鼠标选中
placeholder提示文字（输入框中）
before最开始的位置创建子元素
after最后的位置创建子元素
/* 选中元素中的第一个文字 */
        div::first-letter {
            color:skyblue;
        }
        /* 选中元素中的第一行文字 */
        div::first-line {
            color: gray;
        }
        /* 选中的是鼠标选中的文字 */
        div::selection {
            color: red;
            background-color: gainsboro;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color:skyblue;
        }
        /* 在p元素一开始的位置，创建一个子元素 */
        p::before {
            content: "￥";
        }
        /* 在p元素最后的位置，创建一个子元素 */
        p::after {
            content: "millions";
        }

[!WARNING]

first-letter 和first-line内容若出现使用重叠，first-letter所使用的样式会覆盖first-line的样式

选择器优先级

原则：

  • 通过权重来区分到底哪个样式最优先
  • 行内样式和==!important==出现就不计较权重谁大谁小

细节呈现：

权重语法：（a，b，c）{a,b,c为个数}

aID
b类，伪类，属性
c元素，为元素

权重比较方式

一个一个进行比较，当a比出结果，权重就出结果，若没有，就接着往下让b进行比较，以此类推

[!IMPORTANT]

!important > 行内样式 > 一切权重

!important不到情急不可进行使用，因为这种做法会使工作的交接细节出现问题，

即使使用了，过后也需要删除，找到无法用权重方式使样式变更的原因，并解决

快捷方式：

只要将鼠标放在选择器上，则可以出现权重，无需计算

之前的讲解是为了了解其中的权重计算原理，而非只是表面的计算

CSS三大特性

层叠性

概念:

同一个元素，当有多个样式进行赋予，根据编写顺序，选择器的优先级，样式表的书写区域的优先级来区分哪个先赋予、

级别越高，越后涂，以实现样式的覆盖。

继承性

概念：

元素自动拥有其父元素或祖先元素设置的某些某些样式

常见的样式有

  • text-…
  • font-…
  • line-…
  • color

其他可在MDN进行查看

语法：
<head>
    <style>
               div {
                    	color: red;
                    	font-size: 40px;
                    }
               p {
                      color: aqua;
                      font-size: 20px;
                 }
	</style>
</head>
<body>
    <div>
        div文字
        <span>子代span</span>
        <span>子代span2</span>
        <span>子代span3</span>
        <p>
            <span>grandspan</span>
        </p>
    </div>
</body>

优先级

同前面选择器讲的优先级一样，但加上了“继承的样式在最低级别”

语法：
<style>
    p {
        color: red;
    }
    * {
        color: skyblue;
    }
</style>

<p>
    父代
    <span>
    子代
    </span>
</p>

[!NOTE]

并集选择器的每一部分是分开算的

CSS常用属性

像素

概念：

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子、是数码感光元件上最小的感光单位，也是数字图片上最小的不可再分割的元素。

通俗点概括就是一个在显示屏上亮着的小点，而看到的显示屏的画面就是一个一个的像素构成的。

cm，mm也可以用，但是不够精细

像素大小不同而导致的视觉效果

[!IMPORTANT]

相同大小的显示屏幕，不同分辨率，像素实际大小不同

不过无需担心，实际开发有具体的设计稿

颜色表示方式

颜色名

缺点：

有限，不精确

语法：

p {
    color: red;
}

具体查看W3school网站

rgb(a)

概念：

  • r：red（红色） 0~255 0%~100%
  • g：green（蓝色）0~255 0%~100%
  • b：blue（蓝色） 0~255 0%~100%
  • a：透明度 0~1 0%~100%

r,g,b光的三原色

语法：

 p:first-child {
            color: rgb(100, 200,255);
        }
        p:nth-child(2){
            color: rgb(172,60,0);
        }
        p:nth-child(3){
            color: rgb(100,200,100);
        }
        p:last-child {
            color: rgba(100, 200, 200，50%);
        }

rgb要么都是0~255，要么都是百分比

可以通过vscode进行微调，只要放在颜色上面就会有调色板出现，可以进行微调

三种颜色值相同时，为灰色，值越大，灰色越浅

HEX(A)

语法：

#???

/* 本质和rgba相同，只是为2位16进制数字进行表示，00~ff*/
 .oh1 {
            color: #ff8811;
        }
        .oh2 {
            color: #ff1188;
        }
        .oh3 {
            color: #f18f;
            /*两位相同可以进行简写*/
        }
HSL(A)

概念：

H：色相 0~360度 图示如下

S：饱和度 0%~100% 向色相中对应颜色中添加灰色 0%-全灰 100%-没有灰

L：亮度 0%~100% 0%-没光，黑色 100%-光太强，白色
色相的度数对应的颜色

没光就像关了灯，伸手不见五指看到的景象

光太强就像奥特曼里的光之世界一般

A：透明度 0%~100%

语法：

 .oh1 {
            color: hsl(255, 0%, 50%);
        }
        .oh2 {
            color: hsl(0, 100%, 50%);
        } 
        .oh3 {
            color: hsl(60, 100%, 50%);
        }
        .oh4 {
            color: hsl(120, 100%, 50%,50%);
        }
        .oh5 {
            color: hsl(180, 100%, 50%);
        }

常用字体属性

字体大小

font-size

最小字体大小：

chrome浏览器是12px，不同浏览器有不同标准

不写时：

默认值为16px（chrome浏览器标准）

可以进行调整，所以字体最好都给一个明确的值

语法：

 .oh1 {
            font-size: 40px;
        }
        .oh2 {
            font-size: 30px;
        }
        .oh3 {
            font-size: 20px;
        }
字体族

font-family

概念：

字体的不同写法，如楷体，行楷，华文彩云，微软雅黑等等

分类：

  • 衬线字体：如楷体等字体末端带有衬线效果，是较为传统的字体，非现代的印刷字体
  • 非衬线字体：如微软雅黑等偏现代风格的印刷体

查找方式：

  • 通过搜索引擎进行查找
  • 电脑有的可以去设置里的字体查找

语法：

 .oh1 {
            font-family: 'Courier New', Courier, monospace;
        }
        .oh2 {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
       
        .oh3 {
            font-family: "楷体",serif;
        }
        .oh4 {
            font-family: "华文彩云";
        }

[!IMPORTANT]

  • 可以设置多个，浏览器会从左到右开始查找
  • 多个字体的值需要是一个类型的
  • 最好都带上双引号
  • 在设置多个字体后都加serif（衬线字体）或sans-serif（非衬线字体），以便前面字体浏览器都没有可以查找浏览器有的其他相同类型的字体。
字体风格

font-style

作用：

控制字体是否为斜体

语法：

 	.oh1 {
            font-style: normal;
        }
        /* 推荐倾斜字体
        本来所设计的，即使找不到也会进行强制
        */
        .oh2 {
            font-style: italic;
        }
        /* 强制倾斜
        有些字体本身没有设置倾斜
        */
        .oh3 {
            font-style: oblique;
        }
字体粗细

font-weight

语法：

.oh1 {
            font-weight: 600;
        }
        .oh2 {
            font-weight: 500;
        }
        .oh3 {
            font-weight: 300;
        }
        .oh4 {
            font-weight: bolder;
        }
        .oh5 {
            font-weight: bold;
        }
        .oh6 {
            font-weight: normal;
        }
        .oh7 {
            font-weight: lighter;
        }

[!TIP]

  • 100~1000：数值越大，字体越粗
  • 100~300：lighter
  • 400~500：normal
  • 600及以上：bold
  • bolder：更粗 多数字体都不支持

更加详细的说明：

[!IMPORTANT]

  • 由于字体设计原因，不一定和设置的大小一致，可能大点，或者小点（字体框的原因）
  • 文字相对于字体设计框，一般都靠下一点
  • 字体设计时，x的底边为基线
字体复合属性

font

作用;

把上述字体属性样式合并为一个属性 实际开发更加推荐

语法：

.oh1 {
            font: bold italic 20px "楷体",serif;
        }

[!CAUTION]

  • 字体大小，字体族必须写
  • 字体族放在最后写，字体大小放在倒数第二位
  • 各个属性用空格隔开

文本属性

文本颜色

color

颜色的表现形式如上

语法：

 .oh1 {
            color: skyblue;
        }
        .oh2 {
            color: #1133ff88;
        }
        .oh3 {
            color: #1133ff;
        }
        .oh4 {
            color: rgb(100, 200, 200);
        }
        .oh5 {
            color: rgba(100,0,200, 50%);
        }
        .oh6 {
            color: hsl(180, 80%, 60%);
        }
文本间距

letter-spacing

word-spacing

语法：

/* 字母间距 */
        .oh1 {
            letter-spacing: 2px;
        }
        .oh2 {
            letter-spacing: -2px;
        }
        /* 单词间距
        中文通过空格来表示为单词
        默认对中文不起作用
        */
        .oh3 {
            word-spacing: 10px;
        }
        .oh4 {
            word-spacing: -3px;
        }

正值使间距变大， 负值使间距变小

文本修饰

text-decoration

作用：

控制文本的各种装饰线，如下划线，上划线，删除线

语法：

 /* 下划线 */
        .oh1 {
            text-decoration: underline;
        }
        /* 上划线 */
        .oh2 {
            text-decoration: overline;
        }
        /* 删除线 */
        .oh3 {
            text-decoration: line-through;
        }
/*搭配如下的值可以更好*/
        /* 虚线 */
        .oh4 {
            text-decoration: underline dotted;
        }
        /* 波浪线 */
        .oh5 {
            text-decoration: underline wavy;
        }
        /* 颜色 */
        .oh6 {
            text-decoration: underline red;
        }
        /* 超链接以及其他有线的都可以去除掉 */
        a {
            text-decoration: none;
        }

当有一些本身有装饰线的也可以通过text-decoration来去除

文本缩进

text-indent

作用：

控制文本首字母的缩进 单位：px

语法：

.oh1 {
            text-indent: 50px;
        }
        .oh2 {
            text-indent: 20px;
        }
文本对齐-水平

text-align

作用：

控制文本的水平对齐方式。

语法：

 p {
            background-color: skyblue;
        }
        .oh1 {
            text-align: center;
        }
             /* 默认值 */
        .oh2 {
            text-align: left;
        }
        .oh3 {
            text-align: right;
        }

left值为text-align的默认值

行高

line-height

概念：

一行文字的高度

对比：

属性意义
line-height当没有height时，一个标签的整体高度（背景色）就是line-height*行数
height有height时，一个标签的整体高度（背景色）就是height的值

[!IMPORTANT]

  • 在没有height时，若line-height过小导致两行文字的字体重叠，则背景色只有一个line-height的值
  • height的值为0时，没有背景色
  • line-height和height的值都不能比0小，否则浏览器会自动忽略，屏蔽这段代源代码，使用默认的行高和height
  • line-height的值不应与字体大小font-size相同或小，这样会导致两行文字叠在一起
  • 可以被继承，所以最好写数值（倍数），而不是会因为其他变而导致不自然的px

语法：

 /* 行高为0，如果有两行文字则会产生重叠 */
        .oh1 {
          line-height: 0;
          background-color: skyblue;
          height: 10px;
        }
        /* height为0，则会丢失背景色 */
        .oh2 {
            background-color: skyblue;
            height: 0;
            line-height: 1;
        }
        /* 整体高度和行高一样，则一行文字会垂直居中，多行则会跳出背景色 */
        .oh3 {
            background-color: aqua;
            height: 100px;
            line-height: 100px;
        }
        /* 如果两行文字重叠，则背景色只有一个行高的宽度 */
        .oh4 {
            background-color: blue;
            line-height: 10px;
        }
        /* 没有height则高度为line-height*行数 */
        .oh5 {
            background-color: brown;
            line-height: 30px;

        }

应用场景

  • 多行文字：控制行与行之间的距离
  • 单行：让height = line-height，可以实现文字垂直居中（并不是绝对的）
文本对齐_垂直

语法：

/* 默认就是顶部对齐 */
        .oh1 {
            background-color: skyblue;
            height: 100px;
        }
        /* height = line-height */
        .oh2 {
            background-color: aqua;
            height: 100px;
            line-height: 100px;
        }
        /* line-height = （height * 2） - font-size - x 
         x是字体族，动态决定的值
        */
        .oh3 {
            background-color: blue;
            font-size: 40px;
            height: 400px;
            line-height:760px;
        }

[!NOTE]

调整文字的垂直方向上的位置，后期学习后可以用定位，现在的方法并不常用

vertical-align

作用：

用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。

语法：

 .oh {
            background-color: skyblue;
            font-size: 100px;
            height: 300px;
        
        }
        /* 使元素的基线与父元素的基线对齐。
 */
        .oh1 {
            background-color: blue;
            vertical-align: baseline;
            font-size: 30px;
        }
        /* 使元素的顶部与其所在行的顶部对齐。
 */
        .oh2 {
            background-color: blue;
            vertical-align: middle;
            font-size: 30px;
        }
        /* 使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。 */

        .oh3 {
            background-color: blue;
            vertical-align: top;
            font-size: 30px;
        }
        /* 使元素的底部与其所在行的底部对齐。 */
        .oh4 {
            background-color: blue;
            vertical-align: bottom;
            font-size: 30px;
        }   
        .top {
            vertical-align: top;
        }
  • 可以是一行中文字与文字之间的相对位置，也可以是文字与图片的相对位置，谁动取决于谁更大
  • 也可以是表格中单元格中内容所处的垂直方向上的位置

列表属性

**作用对象：

ul ol li

分类：

属性名属性值作用
list-of-typenone，square，disc，decimal，lower-roman，upper-roman等设置列表的符号
list-style-positoninside，outside列表符号的位置
list-of-imageurl自定义列表符号
list-style数量，顺序都不受到限制复合属性

语法：

 /* 设置列表符号 */
        /* 不显示 */
        .oh1 {
            list-style-type: none;
        }
        /* 实心方块 */
        .oh2 {
            list-style-type: square;
        }
        /* 圆形 */
        .oh3 {
            list-style-type: circle;
        }
        /* 数字 */
        .oh4 {
            list-style-type: decimal;
        }
        /* 小写罗马数字 */
        .oh5 {
            list-style-type: lower-roman;
        }
        /* 大写字母 */
        .oh6 {
            list-style-type: upper-alpha;
        }
        /* 小写字母 */
        .oh7 {
            list-style-type: lower-alpha;
        }
        /* 设置列表符号的位置 */
        
        /* 在li的里边 */
        .oh9 {
            
            list-style-position: inside;
        
        }
        /* 在li的外边 */
        .oh10 {
            list-style-position: outside;
        }
        /* 自定义列表符号 */
        .oh8 {
            list-style-image: url(../favicon.ico);
        }
        /* 复合属性 */
        .oh11 {
            list-style: inside lower-roman;
        }

表格属性

边框属性

其他元素都可以用

若作用于表格，则有table，th，td元素可以作用于

分类：

属性名属性值作用
border-widthcss中的长度值边框宽度
border-color颜色的表现形式都可以边框颜色
border-stylenone，solid，dashed，dotted，double边框风格
border不受数量，顺序的限制上述属性的复合属性

语法：

table {
            border-width: 2px;
            border-color: skyblue;
            border-style: dashed;
        }
        th,
        td {
            border: 1px aqua dashed;
        }
表格独有属性

分类

属性名属性值作用
table-layoutauto，fixed每列的宽度
border-spacingcss的长度值单元格的间距
border-collapsecollapse，separate合并单元格间距
empty-cellsshow，hide隐藏没有内容的单元格
caption-sidetop，bottom表格标题位置

[!IMPORTANT]

border-spacing和empty-cell需要单元格不合并才可以生效

只有table标签才可以用

语法：

table {
            border-width: 2px;
            border-color: skyblue;
            border-style: dashed;
            /* 控制表格的列宽 */
            table-layout: fixed;
            width: 300px;
            /* 单元格间距 */
            border-spacing: 5px;
            /* 合并单元格间距 */
            border-collapse: collapse;
            /* 隐藏没有内容的单元格 */
            empty-cells: hide;
            /* 设置标题位置 */
            caption-side: bottom;
        }
        th,
        td {
            border: 1px aqua dashed;
        }

背景属性

分类

属性名属性值作用
background-color默认为transparent（透明）设置背景颜色
background-imageurl设置背景颜色
background-repeatrepeat，repeat-x，repeat-y，no-repeat背景重复方式
background-position关键词或者x，y坐标（单元：px）背景图位置
background不受数量和顺序的限制复合属性

语法：

 div {
            width: 200px;
            height: 300px;
            font-size: 100px;
            /* 背景颜色默认值为透明 */
            background-color: skyblue;
            border: 1px blue dashed;
            /* 背景图片 */
            background-image: url(../favicon.ico);
            /* 背景重复方式 */
            background-repeat: no-repeat;
            /* 背景图位置 */
            background-position: center center;
        }

鼠标属性

语法：

div {
            cursor: crosshair; /*十字架*/
        }

[!CAUTION]

其他属性值：

pointer ：小手 move ：移动图标 text ：文字选择器 wait ：等待 help ：帮助

自定义鼠标图标

cursor： url（），pointer；（pointer为鼠标对应的类型）

超雄代码狂
关注
  • 23
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础(part8)--文本外观属性
小山羊的学习日志
06-29 1962
学习笔记，仅供参考，有错必纠 文章目录CSS文本外观属性color:文本颜色letter-spacingword-spacingline-heighttest-decorationtext-aligntext-indentwhite-spaceword-break CSS 文本外观属性 color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： 预定义的颜色值，如red, green, blue等 十六进制，如#FFFFFF, #29D794等 RGB代码，如rgb(255,
Css的用法总结part4 line-clamp
Super Livia
02-04 1230
line-clamp 参考：line-clamp 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列
Part 3 - Integrated sass/css loader
ljm_lijingming的专栏
03-22 1546
Step 1 1、npm install style-loader css-loader sass-loader sass --save-dev 2、编辑webpack.config.js const path = require('path') const publicPath='../build/' const rootpath=path.resolve(__dirname,publicPath) const HtmlWebpackPlugin= require('html-webpack-p
css代码检查工具--cssLint
wuww18stu的博客
01-09 1608
微信公众号：前端程序猿之路 关注可了解更多的前端知识，反馈问题或建议，请公众号留言。 如果你觉得公众号内容对你有帮助，欢迎关注并转载 css代码检查工具–cssLint cssLint简介 CSSLint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题，使用方法很简单，只需要把 CSS 内容复制贴上，最后按下 LINT！按钮就可以检查。 底下有一些设定项目可以调整检测的项目和规则，预...
通过css-split-webpack-plugin解决css文件过大，导致ie样式错乱的问题
weixin_44090040的博客
08-20 1173
css-split-webpack-plugin插件的作用是将大尺寸的css再分割成多个css文件 安装插件css-split-webpack-plugin npm i css-split-webpack-plugin 在webpack.prod.conf配置css-split-webpack-plugin插件,官方要求如下: const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default; ... plugins: [
css-part-2
02-13
在IT行业中，CSS（Cascading Style Sheets）是用于描述...通过深入学习`css-part-2`的内容，你将掌握更高级的CSS技巧，为创建美观、响应且高效的网页奠定坚实基础。不断实践和探索，你将在网页设计的道路上更进一步。
CSS-382-Project-2-Part-1
02-08
CSS-382-Project-2-Part-1
Personality-quiz-part-1
08-04
个性测验第 1 部分重新混合此入门代码或仅使用它来查看您如何开始进行个性测验。 单击标题中的显示以实时查看您的应用程序。 我们建议选择“代码旁边”选项，以便您可以与代码并排查看网页更新。 对您的代码的更新将...
Head First HTML与CSS 第2版-part2
11-08
Head First HTML与CSS ， HeadFirst系列，必属精品。
Zaio-Part-2
03-20
最后，了解CSS（Cascading Style Sheets）对于理解"Zaio-Part-2"也是至关重要的。CSS用于控制HTML元素的样式，如颜色、字体、布局等。我们可以使用内联样式（在HTML元素中使用style属性）、内部样式表（在中使用元素...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 371
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
最新发布
nibabaoo的博客
08-22 109
在Vue3项目中修改Element-Plus主题色
pywebview 入门
小小宾的博客
08-18 753
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 672
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 276
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 86
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 426
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3923
web前端之html弹窗面板的popover新属性
CORS error && 302 Found
zcxbd的博客
08-19 198
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
有四个类名叫part1-pic-bg的盒子。id分别是part1-iconinfo1，part1-iconinfo2，part1-iconinfo3，part1-iconinfo4，在这个大盒子里面分别有一个类名叫part1-iconinfo的小盒子，，id值分别叫part1-iconinfo1-content，part1-iconinfo2-content，part1-iconinfo3-content，part1-iconinfo4-content，最初类名叫part1-iconinfo的盒子是隐藏状态，当点击大盒子的时候，对应的显示各自的小盒子，再次点击任意地方可以隐藏小盒子的html，css，jquery代码
05-26
以下是实现的代码： HTML代码： ```html <div class="part1-pic-bg"> <div class="part1-iconinfo1" data-target="part1-iconinfo1-content">Icon Info 1</div> <div class="part1-iconinfo2" data-target="part1-iconinfo2-content">Icon Info 2</div> <div class="part1-iconinfo3" data-target="part1-iconinfo3-content">Icon Info 3</div> <div class="part1-iconinfo4" data-target="part1-iconinfo4-content">Icon Info 4</div> <div class="part1-iconinfo" id="part1-iconinfo1-content">Icon Info 1 Content</div> <div class="part1-iconinfo" id="part1-iconinfo2-content">Icon Info 2 Content</div> <div class="part1-iconinfo" id="part1-iconinfo3-content">Icon Info 3 Content</div> <div class="part1-iconinfo" id="part1-iconinfo4-content">Icon Info 4 Content</div> </div> ``` CSS代码： ```css .part1-pic-bg { display: flex; flex-wrap: wrap; } .part1-iconinfo { display: none; width: 100%; margin-top: 10px; background-color: #f0f0f0; padding: 10px; } ``` jQuery代码： ```javascript $(document).ready(function() { $('.part1-pic-bg > div').click(function() { var target = '#' + $(this).data('target'); $(target).slideToggle(); }); $(document).click(function(event) { if (!$(event.target).closest('.part1-pic-bg').length) { $('.part1-iconinfo').slideUp(); } }); }); ``` 解释一下代码： 首先，在HTML代码中，我们给每个大盒子都添加了一个data-target属性，用来指定对应的小盒子的id值。 然后，我们在CSS代码中将所有的小盒子都隐藏了起来，并设置了一些样式。 接着，我们使用jQuery来实现点击大盒子显示对应的小盒子的功能。具体实现方式是，当点击大盒子时，我们获取它的data-target属性值，然后根据该值找到对应的小盒子，并使用slideToggle()方法来切换显示和隐藏状态。 最后，我们再通过jQuery来实现点击任意地方隐藏小盒子的功能。具体实现方式是，当用户点击文档中除了大盒子以外的任意地方时，我们就将所有的小盒子都隐藏起来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值