CSS3学习

最新推荐文章于 2024-04-19 05:46:31 发布
最新推荐文章于 2024-04-19 05:46:31 发布
阅读量697 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43466639/article/details/124025826
版权

CSS3学习

一、简介

  1. 网页是分层的，类似蛋糕的每一层，但是看到的始终是最上面一层。所以CSS是层叠样式表，可以为每一层去修改样式。

  2. 修改样式的方式：

    # 1、内联样式、行内样式。在标签内部通过设置style属性来设置元素的样式。这一块虽然在html中提到过，但是是属于CSS的语法.开发中不使用。

<p style="color:red;font-size:60px;">设置行内样式</p>

# 2、内部样式表。通过CSS的选择器来选中元素并为选中的元素同时设置样式。但是不能跨网页使用。
<head>
    <style>
        p{
            color:red;
            font-size: 50px;
        }
    </style>
</head>

# 3、外部样式表。将样式编写到一个CSS样式文件中。html文件通过link标签进行引入。这样可以跨网页使用，并且可以使用浏览器的缓存机制。

二、CSS语法

1、CSS语法在style标签中使用以及CSS文件中。虽然style标签是在html文件中，但是不同于其他部分。CSS语法主要由两个部分组成，一是选择器，二是声明块。

2、选择器指定元素

3、声明块指定元素的样式。即元素指定的样式是什么样的。

三、选择器selectors

1、常用选择器

（1）元素选择器。可以批量进行设置，但是针对特定的需求时无法满足。
p{
	color:red;
}
（2）id选择器。根据id属性唯一选择一个元素，id不可重复。
<p id="red">id选择器</p>

<style>
    #red{
        color:red;
    }
</style>
（3）class类选择器。class属性可以重复，并且可以设置多个，用来进行归类。一般用class。
<p class="red">id选择器</p>

<stlye>
    .red{
		color:red;
	}
</stlye>
（4）通配选择器。用来选中所有的元素。
*{
	color:red;
}

2、复合选择器

（1）交集选择器，用.表示。
# 将class为red的div字体设置为30px
div.red{
	font-size:30px;
}
（2）并集选择器，同时选择多个选择器对应的元素，用,表示。
# h1字体和span字体设置为绿色。不可能一个字体同时是h1格式、span格式，所以属于并集。
h1,span{
	color:green
}

3、关系选择器

关系有父子，祖先（祖先关系包含父子），兄弟。当多个选择器混用的时候，需要指定特定某个样式时，就需要关系选择器。

# 例子
<div>
    <p>
        <span>我是p元素中的span</span>
    </p>
    <span>我是div中的span元素</span>
</div>

# 子元素选择器，用来选择父元素的指定子元素。p中的span是后代元素，不是子元素。
div > span{
	color:red;
}

# 后代元素选择器。选择指定元素的指定后代。p里面的span,div里面的span都是后代。
div span{
	color:red;
}

# 选择下一个兄弟。p后面紧挨着的span,总共两个。
p + span{
	color:red;
}

# 选择下面所有的兄弟
p ~ span{
	color:red;
}

4、属性选择器

不是class类，class类有专门的类选择器。是针对标签里面的属性特点进行设置样式。

<p title="abc">这是一个含有abc提示的语句。</p>

# 1、含有指定属性的元素
p[title]{
    
}

# 2、含有指定属性值的元素
p[title=abc]{
    
}

# 3、以指定属性值开头的元素
p[title^=abc]{
    
}

# 4、以指定属性值结尾的元素
p[title$=abc]{
    
}

# 5、包含指定属性值的元素
p[title*=abc]{
    
}

5、伪类

（1）伪类选择器

伪类是一种特殊的状态，而不单单指某个位置。比如第一个元素，被点击的元素，鼠标移入的元素。利用伪类选择器可以不在标签里面进行修改，只用在样式里面修改。

<ul>
    <li>这是1</li>
    <li>这是2</li>
</ul>

# 根据所有的子元素进行排序
# :first-child --- 第一个元素
# :last-child --- 第二个元素
# :nth-child() --- 第n个元素，n(全部)、2n/even(偶数)、 2n+1/odd(奇数)

ul > li:first-child{
	color:red;
}

# 根据同类型的子元素进行排序
:first-of-typle
:last-of-typle
:nth-of-typle

# 排除特定的元素
ul > li:not(:nth-child(3)){
	color:red;
}
（2）超链接的伪类

超链接的特殊状态有访问过和没有访问过两种。但是以下两种方式只能在超链接中使用。

<a href="https://www.baidu.com">访问过的链接</a>
<a href="https://www.baidu123.com">没有被访问过的链接</a>

# 使用:link表示没有访问过的链接，即正常的链接。:visited 表示访问过的。
<style>
	a:link{
    	color:red;
	}
</style>

hover表示鼠标移入的状态，即只有当鼠标移动的时候，才可以显示变化。active表示鼠标点击，可以在任何标签中使用。

a:hover{
	color:red;
}

6、伪元素

伪元素是指一些特殊的位置。使用::表示。

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的位置，即可以在页面上拖动鼠标，进行随机选中。

# 对于div标签，有元素的开始和结尾两个特殊位置
::before
::after

# 举例
<p>这是p元素。</p>

p::first-letter{
    
}

7、其他基础知识

（1）样式的继承
  1. 样式的继承指的是一个元素设置的样式同时也会应用到它的后代元素上面。用于后代关系，不仅仅是子代元素。
  2. 并不是所有的样式均会继承，背景、布局等相关的。
（2）选择器的权重

1、样式的冲突：当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值。

<p id="box1" class="d1"></p>

# 冲突
<style>
    #box1{
        color:red;
    }

    .d1{
        color:blue;
    }
</style>

2、选择器的权重：

  • 内联样式 1000
  • id选择器 100
  • 类和伪类选择器 10
  • 元素选择器 1
  • 通配选择器 0
  • 继承样式 没有优先级

3、当使用多个选择器时，将优先级累加进行比较。当样式不起作用的时候，思考优先级的问题。

（3）大小单位

1、像素：px。像素越小，屏幕越清晰。不同屏幕的像素是不一样的。

2、百分比：百分比是相对于父元素属性的百分比，且设置百分比可以随着父元素的改变而改变。

3、em: **1em = 1 font-size。**根据字体的大小改变而改变。

4、rem: 相对于根元素的字体大小进行计算的。

<style>
.box1{
    width:100px;
    height:100px;
}

.box2{
    width:50%;
    height:50%;
}


# 根元素大小
html{
    font-size:30px;
}

.box3{
    width:10rem;
}
</style>
（4）颜色单位

1、RGB值：每一种颜色的范围在 0~255（ 0 % ~ 100 %）之间。

2、RGBA值：增加了一个值表示不透明度，1（不透明）、0（透明）、5（半透明）

3、十六进制的RGB：颜色通过00-ff表示，每个颜色对应两个颜色。如果颜色两两重复，则可以简写。（#aabbcc – > #abc）

2、HSL值 HSLA值：H(色相) S(饱和度) L(亮度)

3、颜色名字：red\orange

四、声明块（布局）

1、文档流
  • 文档流是文档的最底层，是网页的基础。所创建的元素都是在文档流中排列。
  • 元素有两种状态，不在（脱离文档流）和在。
  • 元素在文档流中的特点：

块元素（div）：

  • 无论宽度是多少，都会独占一行；
  • 默认宽度是父元素的全部，默认高度是被内容全部（元素多少就是多少）。当没有文字内容的时候，是看不到任何的显示。

行元素（span):

  • 不独占一行，只占自身大小；
  • 如果一行占满，则换行。
2、块元素的盒子模型
  • CSS将页面中的所有元素都设置为一个矩形的盒子，这样对页面的布局就是将不同的盒子摆放到不同的位置。
  • 盒子从里到外，分别是content(内容区)、padding(内边距)、border(边框)、margin(外边距)。
  • 默认情况一个盒子的大小是由内容区、内边距、边框共同决定的。但是可以通过box-sizing来设置盒子大小的计算方式（content-box 默认、border-box 大小就是整个盒子的大小，内容区大小自动调整。）
# 为了显示一个盒子，需要设置盒子的内容和边框。
<style>
    .box1{
        
        # 设置内容的边框，是存放所有元素的地方。
        width:100px;
        height:100px;
        background-color: red;

        # 设置边框的范围
        border-width: 20px; 
        border-color:blue;
        border-style: solid;
    }
</style>
（1）边框border

分别设置四周的属性

# 设置边框的大小，以下三个参数缺一不可。这是统一设置四周的参数。
border-width: 20px;  # 默认是三个参数
border-color:blue;
border-style: solid;

# 关于宽度，可以利用一组值设置四周的参数。
# 四个值：上 右 下 左
# 三个值：上 左右 下
# 两个值：上下 左右
# 一个值：上下左右
border-width:10px 20px 30px 40px

# 还可以直接指定某一个边的大小:border-xxx-width.颜色的设置同理。
# xxx分别是top right bottom left


# 样式的设置 常用的：solid(实线) dotted(点状线) dashed(虚线) double(双线)

同时设置所有边框的样式,顺序没有要求。同样也有border-xxx

border:10px solid red;
(2) 内边距padding
  • 内边距是指内容区和边框之间的距离。总共有四个方向的距离。padding-xxx(top left right bottom)
  • 可以一次设置所有的距离：padding:10px 20px 30px 40px.(规则同border-width)
  • 一个盒子的大小同时由内容区、内边距、边框决定。内边距的设置会影响到盒子的大小，背景颜色也会延伸到内边距上。
（3）外边距margin
  • 外边距影响元素的位置,影响盒子在网页中的实际占用大小。
  • 设置不同的margin-xxx会影响盒子往不同的方向移动,其中设置左和上外边距会移动元素自身，设置右和下会移动其他盒子。margin同样也可以简写，规则同padding.
  • margin既可以设置正值，也可以设置负值。负值是往相反的方向移动。
  • 外边距的重叠现象：
    • 现象：相邻的垂直方向外边距可能发生重叠，比如说margin-top margin-bottom.
    • 处理：兄弟元素之间正值取最大值，一正一负取和，负值取绝对值最大。对于父子关系而言，子元素外边距会影响到父元素。
（4）水平方向的布局

  • 水平方向的布局由7个元素（margin-left border-left padding-left width padding-right border-right margin-right ）共同决定，且一个元素在其父元素中的水平布局必须要满足7个元素的相加之和 = 父元素的宽度。

  • 规则：

    • 如果设定的参数相加不满足条件，且没有值设置为auto,则系统会自动调整margin-right的值。

    • 其中三个值可以设置为auto，分别是margin-left、margin-right、width。如果有宽度设置为auto，则宽度始终会是最大的。如果宽度是固定值，其他为auto,则两边距会平分剩余的距离。

    • 水平居中的效果 ：width为固定值，其他为auto。

（5）垂直方向的布局

子元素在垂直方向可能存在溢出现象，可以通过设置overflow属性来使父元素决定如何处理溢出的元素。

  • visible:默认，允许溢出。
  • hidden：不允许
  • scroll：生成两个滚动条。
  • auto:根据需要生成滚动条。
3、行元素的盒子模型

  • 行内元素是不支持设置宽度和高度的，行内的内容有多少就显示多少。

  • 行内元素可以设置padding,margin,border,但是不影响布局。

  • display可以设置行元素的显示类型，inline（将元素设置为行内元素）、 block（将元素设置为块元素）、 inline-block（将元素设置为行块元素，即可以设置宽高，但是不独占一行） 、table（将元素设置为一个表格）、 none（元素不在页面显示，且不保留格式）

  • visibility可以设置元素的显示状态，visible（显示） hidden（不显示但是保留格式）。

4、浏览器的默认样式

默认样式会影响到页面的布局，所以一般情况下编写网页需要清除默认样式。

怎么查找默认样式：通过计算查看，通常是父元素的问题。

如何清除样式：

# 清除指定的元素样式
body{
	margin：0；
    padding：0；
}

# 清除所有元素的样式，但是不完全
*{
 	margin：0；
    padding：0；   
}

# 通过CSS文件清除、更加推荐.建一个文件夹，叫做css,存放CSS重置样式表。reset.css normalize.css
<link rel="stylesheet" href="./css/reset.css">
<style>
</style>
5、轮廓阴影
（1）轮廓 outline

outline 用来设置元素的轮廓线，不会影响可见框的大小。而如果利用边界border进行设置，则会挤掉其他元素，从而影响效果。两个用法一样。

（2）阴影 box-shadow
  • 通过box-shadow设置，不影响页面效果。
  • box-shadow：水平偏移量 垂直偏移量 阴影的模糊半径 阴影的颜色
image-20220331161418138
6、圆角 border-radius

  • border-radius进行设置圆角，圆角设置的是圆的半径大小。border-xxx-radius(top-left、top-right、bottom-left、bottom-right).

  • border-radis同样可以简写。几个不同的值代表不同的意思。

  • 设置一个值的时候，是边角一个圆。设置两个不同值的时候，是椭圆。

  • 设置圆形:border-radius:50%

7、浮动 float
（1）基本知识

1、通过float属性进行设置，有left,right两种。分别是让元素向左浮动或者是向右浮动。

2、设置了浮动属性的元素会在文档流中脱离，即不会占据原来的空间。

3、作用：

（1) 可以将竖着排列的元素横着排（竖向布局改成横向）。即将所有的块元素都设置浮动，然后都会脱离文档流，自动的向上堆叠在一起。而且一排放不下的时候，就会换行。

(2) 可以实现文字环绕图片的效果。

4、设置浮动之后，元素脱离文档流，就会没有行内元素或者块内元素的区分了（这里脱离文档流的普遍影响）。

（2）应用 – 网页的布局

一般说网页的布局，就是利用块元素。

# 将整个网页竖着排，分为三大部分。如果要横着水平排列，就设置浮动。
<body>
    <!-- 头部 -->
    <header></header>
    
    <!-- 中间主题内容 -->
    <main></main>

    <!-- 尾部元素 -->
    <footer></footer>
</body>
（3）缺陷 – 高度塌陷+BFC+父子元素外边距重叠
a.高度塌陷：

在浮动布局中，父元素的高度默认是被子元素撑开的，为了让子元素的文字部分可以自动显示，一般不会将父元素的高度写死。

​ 但是当子元素设置浮动的时候，脱离文档流，父元素的高度无法被撑起，造成父元素的高度丢失。

image-20220331104839897
b.解决高度塌陷：

1、BFC（块级格式化环境），CSS中的一个隐含属性，开启BFC的元素是一个单独的布局。

​ BFC开启方式：

​ （1）可以通过在父元素中设置overflow:hidden来开启BFC，从而包含浮动的子元素.

​ (2) 父元素当中设置浮动 float:left;

​ (3) 设置为行内块元素

​ BFC的特点：

​ （1）不会被浮动的元素覆盖

​ （2）可以包含浮动的子元素

​ （3）子元素和父元素的外边距不会重叠.即可以让子元素独立的移动。

image-20220331110135758

2、通过clear解决高度塌陷（最终方案） – 利用after伪类去解决

思路：当父元素当中只有一个子元素的时候，会造成塌陷。所以可以在底部（::aftre）加一个隐藏的元素来撑起高度

# 在父元素的结束位置，消除另外一父元素对它的影响，始终保持在尾部，撑起高度即可。
.box1::after{
	content:'';
	clear:both;
    # 由于after是行内元素，不能独占一行。所以还要转换成块元素。
	display:block;
}
c.解决父元素和子元素外边距重叠的问题

可以利用2的思想解决父元素和子元素外边距重叠的问题.-- 在顶部加元素,用来间隔父元素和子元素的外边距

.box1::before{
	content:'';
	display:table;
}
d.同时解决高度塌陷以及父子元素外边距重叠问题 – 通用代码
# clearfix这个类同时解决

.clearfix::before,
.clearfix::after{
	content:'';
	display:both;
	clear:both;
}

# 为box1解决这个问题
<body>
	<div class='box1 clearfix'> </div>
</body>
(4) clear:清除设置float后对其他元素的产生的影响

当元素设置浮动后，会脱离文档流，其他的元素会自动向上。但是可以在其他元素中设置clear:left；消除影响，从而在原位置保持不变。可以消除左侧（left)或者右侧(right)，或者两侧(both)的影响。

8、定位 position
  • 将元素可以在页面中任意的移动，而不会对其他元素造成影响.
  • 可选值：static(未开启)，relative absolute fixed sticky。
  • 开启了定位之后，可以通过偏移量来设置元素的位置。这个偏移量只会影响自己的移动，不会影响别人。

偏移量：top（定位元素和定位位置的上边的位置）、bottom 、left 、right. （值越大，越往相反的方向移动。可以使用负值）

​ 和margin不同，不会影响其他的元素。通常情况下，只会使用其中四个当中的两个。

(1) 相对定位 relative
  • 开启相对定位以后，如果不设置偏移量，元素不会有任何变化。
  • 相对定位是参照元素在文档流中的位置进行定位的。移动的位置是相对于原来的位置移动的。
  • 会提升元素的层级，不会脱离文档流，不会改变元素性质。
(2) 绝对定位 absolute
  • 不设置偏移量，不会改变元素的位置，但是元素的性质会改变，因为脱离了文档流。
  • 会提升元素的层级。
  • 绝对定位的参考物是包含块。
  • 包含块：正常情况下，是离当前元素最近的祖先块元素。而在定位的情况下，是离它最近的开启了定位的祖先元素。如果都没有开启，那么相对于根元素（html 初始包含块）。
注意：

1、一般在父元素中使用相对位置，在子元素中使用基于父元素的绝对位置。

2、设置绝对定位后，水平方向的布局会加上left、right一共9个值. 而且left、right和margin、width一样可以设置auto.如果有auto,就会自动调整auto的值让其满足。

3、垂直方向的布局会加上bottom、top两个值。

(3) 固定定位 fixed

是绝对定位的一种特殊情况。和绝对定位不一样的是固定定位的参照物是视口。

视口：这和html不一样，视口是不会随着网页的滚动条变化的，会一直出现。

(4) 粘滞定位 sticky

可以将元素达到某个位置的时候，将其定位。但是兼容性不好。

(5) 设置元素的层级 z-index
  • 层级就是元素的覆盖优先级，通过z-index设置，越大层级越高，越优先显示。
  • 祖先元素永远不会盖住后代元素
注意：浮动和定位的使用

一般整体使用浮动进行设置，细节利用定位来调整

9、字体 font
a.字体的基本设置
p{
	color:red;
    font-size:40px;
    
    # 字体是否加粗
    font-weight：normal/bold;
    
    # 字体的风格
    font-style：normal/italic
    
    # 字体类型，可以指定多个字体，使用逗号隔开。但是如果用户的电脑中没有相应的字体，就不能用。
    font-family:monspace;
}

# font-face可以将服务器中的字体直接提供给用户使用
<style>
@font-face{
    font-family:'myfont';
    src:url('./font/xxxx.ttf');
}
</style>

也可以进行快速的字体设置 ： font:字体大小/行高 字体族 .可以省略不写，默认值。

b.图标字体

如果将网页中的所有小图标都变成图片，那么改变的时候会比较困难。所以可以将图标变成类似文字的文件，通过font-face进行设置。这些图标库是已经写好的，比如font awesome\iconfont 可以直接使用

font awesome 使用 

1、将在官网上下载文件，将CSS和webfonts移动到项目中

2、通过link标签将all.css引入网页中

<link rel="stylesheet" href="./fa/css/all.css"

3、使用图标字体：

​ (1) 直接通过类名去使用图标字体

# 可以改变图标的大小和颜色
<i class="fas/fab fa-bell" style="font-size:80px; color=red"></i>

​ (2) 通过伪元素去批量设置图标

li::before{
	# 这里是对应的图标编码
	content:'\f1b0‘;
	# 设置字体样式
	# fab
	font-family:'Font Awesome 5 Brands';
	
	# fas 
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	
}

​ （3）通过实体使用图标字体 — &#x图标的编码

<span class="fas">&#xf0f3;</span>

iconfont使用

1、通过link标签将iconfont.css引入网页中

2、使用的时候，改变class的类名为iconfont即可。其他同上面。

c.行高和字体框

行高：文字占有的实际高度，可以通过line-height来改变。行高会在字体框中上下平均分配。

字体框：字体存在的格子，设置font-size就是在设置字体框的高度。

行高（100）是大于字体框（50）的大小，字体框是居中的，行高的其他部分进行均匀的分布。

image-20220331205522780

行间距：行间距 = 行高 - 字体大小

d.文本的对齐方式

1、水平对齐 ：text-align – left \ right \ center(居中对齐) \ justify（两端对齐）

2、垂直对齐（上下的高度差）：vertical-align – baseline(基线对齐 – 水平线) \ top \ bottom \ middle

e.文本的其他样式

1、文本修饰 text-decoration: none / underline / overline / line-through

2、如何处理句子当中的空白 white-space: noraml / mowrap(不换行，整行显示) / pre(保留空白，即句子原样)

10、背景 background
backgroud-color background-image :

图片和背景颜色。下面的性质可以改变图片和背景颜色的呈现方式：

1、background-repeat:设置图片在背景的哪个方向进行铺满。

repeat(默认，x+y) 、 repeat-x(沿x轴方向重复) 、repeat-y、no-repeat(图片不重复)

2、background-position: 设置位置 (两个值)

top left right bottom center 或者是具体数值的偏移量

3、background-origin : 对于偏移量而言的，设置图片偏移量计算的原点

可选值同clip

4、background-size : 设置图片在背景的尺寸

设置数字的宽度和高度 、 cover(比例不变，元素铺满背景，不保证完全显示) 、 contain(比例不变，完整显示)

5、background-attachment : 背景图片是否会跟随元素移动

scorll \ fixed

边框和背景的关系 --background-clip

boder-box(默认，出现) 、 padding-box(不出现在边框，内容区+内边距) 、 content-box(内容区 )

注意：

可以将background的所有属性进行简写，但是position在size的前面，origin在clip的前面

11、表格table的样式
<style>
table{
    width:50%;
    border:1px solid black;
    /* 设置边框的距离 */
    border-spacing: 0px;
    /* 可以用来设置边框的合并效果 */
    border-collapse: collapse;
}

/* 设置每行的效果，可以设置每行的背景颜色突出显示 */
tr:nth-child(2n){
    background-color: aquamarine;
}

td{
    /* 设置单元格的文字样式 */
    vertical-align:middle;
    text-align: center;
}
</style>
是馨呀！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）
朝阳39的博客
06-16 1101
数值越大，优先级越高，尽量保持较低的优先级，以便使用更高优先级的选择器重置样式0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等，这些伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器。1级——标签选择器2级——类选择器、属性选择器和伪类3级——ID选择器4级——style内联5级——!important!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置无效。
字体图标的下载及使用
huangqiang80的博客
09-24 619
图标字体引用 文章目录图标字体引用1、Font Awesome下载用法2、IconFont下载用法 1、Font Awesome 下载 打开官网fontawesome 我这里选择免费版点击下载 下载解压后，将里面的css文件夹和webfonts文件夹移到项目中 注：这两个文件夹必须在同一级目录 再引入css文件夹里的all.css或all.min.css 用法 1、通过类名来使用字体图标，类名对应的图标可到官网或百度搜索 <span class="fas fa-bell"></spa
css基础教程【学习笔记】(1)
最新发布
2401_84093248的博客
04-19 648
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。​ 在 CSS 中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）后代选择器、子选择器、并集选择器、伪类选择器。
vue项目，使用elementUI，修改样式，不生效
zoepriselife316的博客
08-07 4206
由于系统颜色的不同，想单独修改一个组件中的颜色及样式，但是不生效，看到好多人说，可以给个父级，写的是form表单，所以给他包了个div,可是还是不生效，因为层级不够！！！ 所以，解决方案是： 使用F12，找到要修改的元素，使用/deep/，进行穿透，里面的important，根据自己情况使用即可。 <style lang="scss" scoped> /deep/.el-form-item__label { height: 23px; font-size: 17p
css中outline的使用
whaxrl的专栏
08-13 1848
 CSS中outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 例如：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。   一、outline可以按顺序设置如下属性 outline-color ：设置元素轮廓的颜色，其取值与bo
CSS优先级详解
weixin_39716166的博客
11-22 2304
本文将讨论CSS优先级排序规则，主体内容参考并引用到菜鸟教程关于CSS优先级的讲解文章https://www.runoob.com/w3cnote/css-style-priority.html，侵删。 ...
css3学习与例子
09-18
**CSS3学习与实例解析** CSS3是层叠样式表（Cascading Style Sheets）的最新版本，相较于CSS2，它引入了许多新的特性和功能，极大地丰富了网页设计的视觉表现力。本教程将深入探讨CSS3的基础部分、关键布局、阴影...
CSS3学习笔记
01-28
CSS3学习笔记思维导图
css3学习心得分享
01-21
css3实现了很多以前需要用图片实现的效果（渐变边框，盒阴影，真正的圆角，字阴影，多图片背景，字体透明度等) 还统一了部分标准样式（text-overflow,word-wrap,opcity），不必在为firefox连续英文字母折行的问题写...
CSS3 实战 CSS3学习必备书籍
07-10
CSS3学习必备书籍
CSS3学习心得
12-01
这是本人对CSS3学习的一些心得，如若有误，请批评指正，谢谢！
一款很酷的li列表美化实例_层和布局特效
10-29
一款很酷的li列表美化实例_层和布局特效
openlayers 根据style设置显示级别并在字体加背景框
dreamgis的专栏
09-24 2185
根据图层的属性字段设置图层显示级别 Iconstyle:function(feature,resolution) { var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(241,242,236,0.8)', }), stroke : new ol.style.Stroke({ color : 'red', width : 2 }), image:new ol.style.Icon(({ offset: [0, 0]
HTML字体以及图标字体iconfont、Font Awesome的使用
qq_461491877的博客
11-07 2162
字体 • 通过font-family可以指定标签中文字使用的字体。 • 例如： p{font-family:Arial} ​ 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。 • 通过font-family可以同时指定多个字体。 • 例如： p{font-family:Arial , Helvetica , sans-serif} • 如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优
Web前端之字体
花&败
10-28 4594
在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。
CSS中提升优先级属性!important的用法总结
热门推荐
NINE-NINE的博客
06-04 5万+
CSS中提升优先级属性!important的用法总结
css样式等级
id_dimu的博客
04-03 1432
1. ul、ol 块级元素 、上下margin为 1em 、 左边padding为 40px ul 的 css 样式 list-style-type:disc ol 的 css 样式 list-style-type:decimal list-style-type ：设置列表项标记的类型 常用：none（无标记）、dis...
css样式的级别
hhw199112的博客
12-04 2441
Test                 body {             margin: 0px;             border: solid 1px red;         }         #out {             border:solid 1px black;         }         .outdiv {
20个 CSS 快速提升技巧
yb305
07-24 245
本文涵盖了20个css技巧，可以解决许多工作中常见的问题。 1、使用CSS重置（reset） css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。 *{ box-sizing:border-box; margin:0; padding:0.
html、css、html5、css3
03-27
学习HTML和CSS是成为一名Web开发者的基础，掌握HTML5和CSS3的最新特性，则能够创建出更加现代、功能丰富的网页。通过不断的实践和学习，开发者可以熟练地利用这些技术构建美观且功能强大的网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值