前端三剑客：CSS

已于 2022-04-02 15:16:39 修改
阅读量1.4k 收藏 2
点赞数
分类专栏： css 文章标签： css
于 2022-03-29 11:18:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39935684/article/details/123805362
版权

CSS是Cascading Style Sheet的缩写，中文译作‘层叠样式表’或者是“级联样式表”，是用于控制网页外观处理并允许网页的表现与内容分离的一种标记性语言，css不需要编译，可以直接由浏览器执行（属于浏览器解释型语言），是Web网页开发技术的重要组成部分；

CSS的好处：

  • 使用CSS样式可以有效地对页面进行布局，更加灵活多样
  • 使用CSS样式可以对页面字体，颜色，背景和其他效果实现精准控制，同时对它们的修改和控制变得更加便捷，更加强大
  • 站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改；还可以快速切换主题，我们可以把HTML比作是骨架，CSS是衣服。同一个HTML骨架结构，不同CSS样式，所得到的的美化布局效果不同
  • CSS可以支持多种设备，比如手机，PAD，打印机，电视机，游戏机等
  • CSS可以将网页的表现和结构分离，使页面载入更快，更利于维护，这也是我们的最终目的

CSS基本语法：

CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开；

一、CSS的引入方式

1.行内样式

行内样式：就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用；当个别元素需要应用特殊样式时就可以使用内联样式；但不推荐大量使用内联样式，因为不利于后期维护；

<div style="color: white;background-color: #369;text-align: center">行内设置</div>

2.嵌入式

嵌入式：就是把CSS样式写在HTML文档内部head标签中的style标签里；浏览器加载HTML的同时已经加载了CSS样式了；当单个文档需要特殊，单独的样式时，可以使用内部样式表；

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>锚点的使用</title>
      <meta charset="utf8">

      <style>
          div{
              color: white;
              background-color: #369;
              text-align: center
          }
      </style>
  </head>
  <body>
  
  <div> 嵌入式</div>

  </body>
</html>

3.链接式

链接式：就是把CSS样式写在HTML文档的外部，一个后缀为.css外部样式中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择；在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观；

common.css

div{
      color: white;
      background-color: #369;
      text-align: center
}

html文件

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>锚点的使用</title>
      <meta charset="utf8">

      <link rel="stylesheet" href="common.css">
  </head>
  <body>

  <div>链接式</div>
  
  </body>
</html>

二、CSS的选择器

1.基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
           #i1{
               color: red;
           }

           .c1{
               color: red;
           }
           .c2{
               font-size: 32px;
           }

    </style>


</head>
<body>

<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>

<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>

</body>
</html>

2.组合选择器

2.1后代子代选择器

后代选择器：又称包含选择器；可以选择父元素里面的子元素；其写法就是外层标签在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代；可以是任意选择器的组合；

后代选择器会匹配到子代孙代及所有后代；而子代选择器只会向下匹配到子代，便不会继续向下匹配；

  • 后代选择器：用空格间隔
  • 子代选择器：用大于号>间隔
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器:只让sxm文本变红*/
        .c1 div{
            color: red;
        }
        /*子代选择器：只让p标签文本变色*/
        .c3>.c5{
            color: #0c7823;
        }
    </style>
</head>
<body>
<!--后代选择器-->
<div class="c1">
    <div class="c2">sxm</div>
    <p>p标签</p>
</div>
<div class="c2">sxm2</div>

<!--子代选择器-->
<div class="c3">
    <div class="c4">
        <div class="c5">div标签</div>
    </div>
    <p class="c5">p标签</p>
</div>
</body>
</html>

2.2与或选择器

  • 与选择器：无间隔
  • 或选择器：使用逗号,间隔
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*与选择器：让class=“c1”的p标签变红*/
        p.c1{
            color: red;
        }
        /*或选择器：让class="c1"或span标签变紫*/
        p.c1,span{
            color: blueviolet;
        }
    </style>
</head>
<body>
<!--与选择器-->
<div class="c1">div</div>
<p class="c1">p2</p>
<p>p标签</p>
<!--或选择器-->
<span id="i1">span</span>
</body>
</html>

与选择器一般用于标签选择器与类选择器的组合；一般不与id选择器做组合，因为id选择器本身就能精准的定位到制定的标签； 

2.3兄弟选择器

  • 兄弟选择器不包含自己，且仅会向下匹配，不会向上匹配；
  • 普通兄弟选择器用破折号连接：.c2~div表示class=“c2”的所有弟弟标签中的div标签
  • 毗邻兄弟选择器用加号+连接：.c2+div表示class=“c2”的毗邻弟弟且为div的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*普通兄弟选择器*/
        .c2~div{
            color: red;
        }
        /*毗邻兄弟选择器*/
        .c2+div{
            background-color: #0c7823;
        }
    </style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
<div class="c3">div3</div>
<div class="c4">div4</div>
<p>p</p>
<div class="c5">div5</div>
</body>
</html>

3.属性选择器

举例说明
[att]匹配所有具有att属性的元素，不考虑它的值；
[att=val]匹配所有att属性等于val值得元素；
[att~=val]匹配所有att属性值，其中一个值为val的元素
[att^=val]匹配所有att的属性值以val值开头的元素；
指的是与class=“c1 c2 c3”,双引号中的字符串c1 c2 c3匹配，而不是对每个属性值进行匹配；
[att$=val]匹配所有att的属性值以val值结尾的元素；
指的是与指的是与class=“c1 c2 c3”,双引号中的字符串c1 c2 c3匹配，而不是对每个属性值进行匹配；
[att*=val]匹配所有att属性的属性值中包含val的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器：[属性]*/
        [type='text']{
            border: red 1px solid;
        }
        /*属性选择器+与选择器：让index="1"的p标签变绿*/
        p[index="1"]{
            color: #0c7823;
        }
        /* ~的使用 */
        /*[index~='2']{*/
        /*    background-color: #9acfea;*/
        /*}*/
        /* ^的使用 */
        /*[index^='1']{*/
        /*    background-color: #9acfea;*/
        /*}*/
        /* $的使用*/
        /*[index$='4']{*/
        /*    background-color: #9acfea;*/
        /*}*/
        /*  *的使用*/
        [index*='4']{
            background-color: #9acfea;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">

<div index="1 2 3 4">div1</div>
<p index="12 23">div2</p>
<p index="34 1">div2</p>
</body>
</html>

4.伪类选择器：使用冒号：间隔

4.1anchor伪类选择器：专用于控制链接的显示效果 

使用说明
:linka:link选择所有未被访问的链接。
:visiteda:visited选择所有已被访问的链接。
:activea:active选择活动链接。指的是鼠标左键所点击的链接；
:hovera:hover选择鼠标指针悬浮于其上的链接。
    <style>
        a:link{
            color: yellow;
        }
        a:visited{
            color: gray;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: red;
        }
    </style>

注意：有四个效果选择器有优先级区分； 

4.2before after伪类

作用：用css代码构建html元素效果；

使用说明 
:first-childp:first-child选择属于父元素的第一个子元素的每个 元素。
:last-childp:last-child选择属于其父元素最后一个子元素每个 元素。
:beforep:before在每个p元素下插入内容，作为p元素的大儿子；
:afterp:after在每个p元素下插入内容，作为p元素的小儿子；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:before{
            display: block;
            content: 'sxm';
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">c2</div>
</div>
</body>
</html>

5.样式继承

CSS的样式继承指的是：特定的CSS属性向下传递到子孙元素；总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成一张以下的家族谱；

文本相关属性
font-familyfont-sizeletter-spacingline-height
font-stylefont-varianttext-aligntext-indent
font-weightfonttext-transformword-spacing
colordirection
列表相关属性
list-style-imagelist-style-positionlist-style-typelist-style
表格和其他相关属性
border-collapseborder-spacingcaption-sideempty-cells
cursor

6.选择器优先级

6.1继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的；继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代；继承的权重是非常低的，是比普通元素的权重还要低的0；

但是CSS的继承也是有限制的，有一些属性不能被继承：如border、margin、padding、background等；

6.2优先级

优先级从高到低（括号内表示权重）：!important >行内式（1000）>id选择器（100）>类选择器（10）>标签选择器（1）>通配符>继承>浏览器默认属性

按这些规则将数字字符串相加，得到最终的权重；（经验之谈：越精准的权重越高）

  • 有!important声明的规则高于一切
  • 如果!important声明冲突，则比较优先权
  • 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上
  • 由继承而得到的样式没有specificity的计算，它低于一切其它规则（比如全局通配符*定义的规则）
  • 用数字表示只是说明思想，一万个calss也不如一个id权重高

三、CSS的属性操作

1.文本属性

属性属性值说明
font-style（字体样式风格）normal（默认值）正体；
italic斜体；是字体库的斜体字；
oblique斜体；人为的使文字倾斜，而不是去使用字体库的斜体字；
font-weight（字体粗细）
注意：font-weight的常用值有两个normal和bold，其他值在浏览器中的支持并不好；		normal设置字体为正常字体；相当于数字值400；
bold设置字体为粗体；相当于数字值700；
bolder设置字体为比父级元素字体更粗的字体；
lighter设置字体为比父级元素字体更细的字体；
number

用数字表示字体粗细；从小到大，越来越粗；取值范围：100、200、300、400、500、600、700、800、900；

font-size（字体大小）font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。
font-family（字体族）font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
  中文：  宋体 [ win7以后默认是 微软雅黑 ]
  英文：  Arial
color（字体颜色）可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。
注意：使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达
text-align（文本对齐方式）left（默认值）左对齐
center居中对齐
right右对齐
justify两端对齐
text-decoration（文本内容装饰线条）none无；一般用于删除a标签的下划线；
underline下划线
overline上划线
line-through删除线
line-height（字体行高）normal、px、number、%指的是字体最底端与字体内部顶端之间的距离。
行高 = 字体大小 + 上半行距 + 下半行距
vertical-aligh（文本垂直对齐方式）（该属性是图片属性：指的是图片相对于文本位置的属性）
应用案例：如下		baseline（默认值）图片的底部默认与文本的baseline在同一水平线上；
bottom图片的底部与文本的底线保持在同一水平线；
top
middle
px像素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            vertical-align: 87px;
        }
    </style>
</head>
<body>
<img src="https://p0.ssl.img.360kuai.com/t011f056c08abb8d64a.webp"><span>ysxm</span>
</body>
</html>

注意：块级标签中的文本元素；当文本元素的line-height与块级元素的height相等时，会形成一个文本垂直居中于块级元素的效果；

2.背景属性

属性属性值说明
background-color（背景颜色）transparent（透明）
rgb(255,0,0)RGB十六进制颜色
#ff0000十六进制颜色
颜色单词
background-image（背景图片） 
background-image: url("https://1.webp");
默认情况下，background-image放置在元素的左上角，并在垂直和水平方向垂直平铺；
background-repeat（背景平铺方式）repeat（默认值）平铺
no-repeat不平铺
repeat-xX轴平铺
repeat-yY轴平铺
background-position（背景定位）background-position: x轴坐标 y轴坐标设置背景图片左上角位于元素的轴坐标；
元素坐标轴：以元素左上角为原点（0,0），上边框为X轴，左边框为Y轴；
left；例如：
center；例如： 
background-position: center center;
第一个表示x轴，第二个表示y轴；x轴与y轴相同时，可简写为background-position: center;
right
background（背景样式缩写）background: 背景颜色  背景图片  背景平铺方式  背景定位;

注意：当同时定义了背景颜色和背景图像时，背景图片覆盖在背景颜色之上；所以当背景图片没有被加载到，或者不完全铺满元素时，就会显示背景颜色； 

3.边框属性

属性属性值说明
border-style（边框风格）none无边框；当border的值为none的时候，系统会将忽略border-corlor
hidden隐藏边框；低版本浏览器不支持；
dotted点状边框；
dashed虚线边框；
solied实线边框；
double双实线边框；两条单线与其间隔的和等于border-weight值；
border-weight（边框宽度）px指定数值的宽度；
medium
thin
thick
border-corlor（边框颜色）十六进制
RGB十进制
单词表示法
border（边框样式缩写）border: 边框宽度 边框样式 边框颜色;注意：border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式

border-style、border-width、border-color：

  • 只有一个值的时候表示同时控制上下左右的边框风格
  • 只有两个值得时候表示分别控制上下、左右的边框风格
  • 有三个值的时候表示分别控制上、左右、下的边框风格
  • 有四个值的时候表示分别控制上、右、下、左的边框风格 

border-style、border-width、border-color：

  • border-top-style、border-top-width、border-top-color：设置上边框的样式、宽度、颜色
  • border-bottom-style、border-bottom-width、border-bottom-color：设置下边框的样式、宽度、颜色
  • border-left-style、border-left-width、border-left-color：设置左边框的样式、风格、颜色
  • border-right-style、border-right-width、border-right-color：设置有边框的样式、风格、颜色

4.列表属性

属性属性值说明
list-style（列表项的标记样式）circle空心圆
square正方形
lower-reman小写罗马数字
list-style-type（系统提供的列表项目符号）
list-style-image（自定义的列表项目符号）li { list-style-image:url('qq.gif'); }

5.display属性

display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的元素改成行内元素；

属性属性值说明
displayblock声明当前元素的显示模式为块状元素；
inline声明当前元素的显示模式为行内元素；
inline-block

声明当前元素的显示模式为行内块状元素；

主要用于实现在一行展示多个可设置长宽的元素；

none声明当前元素的显示模式为隐藏；

6.盒子模型（重点）

盒模型指定元素如何显示以及如何相互交互；HTML页面上的每个元素都可以看成一个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成；

属性属性值说明
padding（内边距及其缩写）内边距，也叫“内补白”：表示页面中元素的边框与内容的距离；内边距的值不能是负值；
margin（外边距及其缩写）外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

padding、margin：

  • 只有一个值时表示同时控制上下左右的内边距
  • 只有两个值时表示分别控制上下、左右的内边距
  • 只有三个值时表示分别控制上、左右、下的内边距
  • 有四个值时表示分别控制上、右、下、左的内边距

单独设置：

  • padding-top、margin-top：表示上边的内边距、外边距
  • padding-bottom、margin-bottom：表示下边的内边距、外边距
  • padding-left、margin-left：表示左边的内边距、外边距
  • padding-right、margin-right：表示右边的内边距、外边距

注意：

  • 在网页开发过程中，需要让一个元素相对于父元素水平居中时，可以借助margin的特性来实现：margin：0 auto；
  • 也可以让浏览器的默认边距清零；
  • 当上面的div块的margin-bottom：10px，下面的div块的margin-top：10px时，两个div块间隔是10px，而不是20px；

7.float属性（重点）

8.position属性

qq_39935684
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端三剑客----css(Web开发）
qq_51263139的博客
06-01 573
初学css总结
【JavaWeb】前端三剑客—CSS基础知识
耀的博客
03-24 7204
一、CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 二、基本语法规范 选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值. <head> <style> ...
CSS三剑客
lost_sky的专栏
02-01 402
1、CSS技巧之剑--Pro CSS Techniques ，中文名：CSS实战精粹 2、CSS务实之剑--CSS COOKBOOK 3、CSS实战之剑--CSS: The Missing Manual ，中文名：CSS实战手册 最近迷恋CSS，mark一下
Css“三剑客”实现简单的过渡特效
qq_43390061的博客
03-01 223
许多同学误认为页面上的特效都是js实现的，其实不然。css给我们提供了一个极其强大的属性transition。此属性属于css3的属性。它的值可以是一个时间，即过渡的时间。相当于js中setTimeout，setInterval等写出的效果，接下来解释另外两个“剑客”，伪类选择器和position。 伪类选择器“元素:hover”类似于js中的鼠标事件mouseover。但是它多了一个特性就是移出...
【CSS】总结前端三剑客之一（CSS基础）
x0919的博客
01-29 1808
上一篇文章，我们介绍了HTML语言的基础用法后，今天我们继续学习CSS的基础语法。 CSS，又称为层叠样式表(Cascading Style Sheets)。CSS能够对网页中元素位置的排版进行像素级精准控制，实现美化页面的效果，能够做到页面的样式和结构分离。 文章目录一、基本语法规范二、选择器1、基础选择器2、复合选择器三、常用属性1、字体属性设置字体字体大小字体粗细文字样式（倾斜字）2、文本属性文本颜色文本对齐文本装饰(下划线、上划线、删除线)文本缩进行高3、背景属性背景颜色背景图片背景平铺背景位置背景
前端三剑客 - CSS
weixin_61543874的博客
09-18 346
前端三剑客CSS的使用方法和相关介绍
前端三剑客 html js css 来实现计算器功能
最新发布
08-14
在互联网时代，前端技术的重要性不言而喻，而HTML、CSS和JavaScript作为前端开发的三大基石，被誉为“前端三剑客”。本文将为您揭示如何利用这三大技术，轻松实现一个实用的计算器功能，助您提升前端技能。 HTML是...
前端三剑客（html+css+js）加vue部分基础运用2
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
前端基础三剑客HTML，css，js
04-21
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现UI/UX设计的各种效果，从而让用户获得更好的使用体验。它主要负责页面的展示样式...
关于前端三剑客（HTML、CSS、JavaScript）的学习代码。.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
前端三剑客之CSS
程序员Sharry的博客
07-09 205
前端三剑客之CSS
前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）
weixin_51562484的博客
04-04 1062
前端三剑客 —— CSS （设置中常见的问题）
前端三剑客之css（超详细）
luka.lh的博客
01-28 570
目录一、概念二、基本语法规范三、引入方式1、内部样式表2、行内样式表3、外部样式四、选择器1、基础选择器2、复合选择器五、常用元素属性1、字体属性2、文本属性3、背景属性4、圆角矩形六、chrome调试工具-查看css属性1、打开方式2、各标签页含义3、elements标签页使用七、元素的显示模式1、块级元素2、行内元素（内联元素）3、区别4、改变显示模式八、盒模型1、边框2、内边距3、外边距4、去除浏览器默认样式九、弹性布局 一、概念 CSS(Cascading Style Sheets)层叠样式表，CS
HTML-CSS- JavaScript——网页三剑客
邢美玲
05-07 731
HTML，CSS，JavaScript做什么的？宏观认识
前端三剑客之CSS初体验
探索者李小白的博客
10-15 555
前言 如果说HTML是定义了网页的内容，那么CSS就是描述美观了网页的布局,让页面更加的舒适自然人性化了，加下来我们就来学习一下CSS吧 什么是CSS？ CSS 指层叠样式表 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠 ...
前端面试题
热门推荐
osmunds的博客
04-14 1万+
初级 Vue.js 面试题 1. 为什么Vue被称为“渐进框架”？ 使用渐进式框架的代价很小，从而使现有项目（使用其他技术构建的项目）更容易采用并迁移到新框架。Vue.js 是一个渐进式框架，因为你可以逐步将其引入现有应用，而不必从头开始重写整个程序。 Vue 的最基本和核心的部分涉及“视图”层，因此可以通过逐步将 Vue 引入程序并替换“视图”实现来开始你的旅程。 由于其不断发展的性质，Vue 与其他库配合使用非常好，并且非常容易上手。这与 Angular.js 之类的框架相反，后者要求将现有程序
js强制控制样式
yanlinpu的博客
07-09 841
create style in head <!--layout page--> <head> <script> if(navigator.userAgent.indexOf('CSDNApp')!=-1){ var csstext = 'body main{padding-top:0 !important;}'; va...
CSS 强制修改元素的内联样式 !important 的使用【学习记录】
单枪匹码
06-04 3627
外联修改内联样式无效： 1、方法：属性值后加 !important（注意使用英文的 ! 叹号） border-radius: 20px!important; 2、解决问题：修改前端框架封装好的css样式 在开发过程中经常使用一些前端框架（bootstrap，vue.js，laydate，Vant等等），在使用link导入css文件以后，发现有些css是在标签内使用内嵌的方式实现的，优先级最高，我们通过外联样式无法修改，这时我们就可以使用 !important 来实现。 3、例子： css文件中的边框弧度样
js修改css样式的几种方法
glgom的博客
11-02 686
参考：https://www.cnblogs.com/LiuWeiLong/p/6058059.html 1. 直接设置style的属性 element.style.属性 = 值 某些情况用这个设置 !important值无效。如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '1...
前端三剑客：HTML、CSS与JS基础入门与实践
HTML+CSS+JS前端基础是Web开发的核心技术，它们共同构建了网页的结构、样式和交互功能。HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构，如段落、标题、链接、图像等内容。理解HTML标签及其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值