第十六章：脚本化CSS

最新推荐文章于 2022-07-11 16:46:26 发布

走在大前端的路上

最新推荐文章于 2022-07-11 16:46:26 发布

阅读量209

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/u012211003/article/details/119134497

版权

JavaScript学习笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

CSS概览

层叠样式表（Cascading Style Sheet，CSS）是一种指定HTML文档视觉表现的标准。使用CSS可以精确地指定文档元素的字体、颜色、外边距、缩进、边框，甚至定位。

HTML文档的视觉显式包含很多变量：字体、颜色、间距等。CSS标准列举了这些变量，我们称之为样式属性。CSS定义了这些属性以指定字体、颜色、外边距、边框、背景图片、文本对齐方式、元素尺寸和元素位置。

有两种方式将一组定义视觉表现的CSS属性和对应的HTML元素关联在一起：

1⃣️ 给每个单独的HTML元素设置style属性，称为内联样式。

<span style="margin: 20px; font-size: 14px;"></span>

2⃣️ 通常将单独的HTML元素与CSS样式分开并把它们定义在一个样式表（stylesheet）中会更有用，样式表通过选择器将一组样式属性和使用选择器描述的一组HTML元素关联在一起，一个选择器基于元素ID、类名或标签名或更多条件指定（选择）一个或多个文档中的元素，如下图所示通过标签名进行样式选择设定：

选择器指向您需要设置样式的 HTML 元素，声明块包含一条或多条用分号分隔的声明，每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔，多条 CSS 声明用分号分隔，声明块用花括号括起来。另外，CSS使用 /* */ 进行注释，不支持使用 // 注释。

/*通过标签名设定样式*/
span {
    margin : 20px;
    font-size: 14px;
}

/*通过标签class设定样式*/
.my_span {
    margin : 20px;
    font-size: 14px;
}

在html中，使用<style></style>标签把一个CSS样式表包起来放在<head>标签中，它就和HTML文档关联在一起了。类似<script>元素，<style>元素内容也不会被当成HTML来解析：

<html>
    <head>
        <style>
            body {margin-left: 30px; margin-right: 15px;}
            p {font-size: 14px;}
        </style>
    </head>
    <body>
        <p>Testing</p>
    </body>
</html>

当一个样式表需要在多个页面使用时，通常将其保存在自己的文件中比较好，这个文件不含任何HTML标签，它可以被引入到HTML页面中，但是，不像<script>元素，<style>元素并没有src属性，所以需要使用<link>标签：

<head>
    <title>Test</title>
    <link rel="stylesheet" href="mystyles.css" type="text/css"></link>
</head>

层叠

在CSS中"C"代表了“层叠”，该术语指示了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果：

Web浏览器的默认样式表；
文档的样式表；
每隔独立的HTML元素的style属性；

复合属性

某些经常在一起使用的样式属性可以组合起来使用一个特殊的复合属性：

span {
    border-top: 10px;
    border-bottom: 10px;
    border-left: 10px;
    border-right: 10px;
}

/*复合属性*/
span {
    border: 10px;
}

重要的CSS属性

属性	描述
position	指定元素的定位类型
top、left	指定元素上、左边缘的位置
bottom、right	指定元素下、右边缘的位置
width、height	指定元素的尺寸
z-index	指定元素相对于其他重叠元素的“堆叠次序”，定义了元素定位的第三个维度
display	指定元素是否以及如何显示
visibility	指定元素是否可见
clip	指定元素的“裁剪区域”，只显示元素在区域内的部分
overflow	指定元素比分配的空间大时的处理方式
margin、border、padding	指定元素的空白和边框
background	指定元素的背景颜色或图片
opacity	指定元素的不透明度（或半透明度），它是CSS3的属性，有些浏览器支持，IE中另有他法

用CSS定位元素

CSS中的position属性指定了应用到元素的定位类型，有如下属性值：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
inherit	规定应该从父元素继承 position 属性的值。

第三个维度：z-index

z-index允许指定元素的堆叠次序，并指示两个或多个重叠元素中的哪一个应该绘制在其他的上面。z-index默认为0，可以是正的或负的整数，值越大显示优先级越高（越在上层）。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

边框、外边距和内边距

CSS允许指定元素周围的边框、外边距和内边距。元素的边框是一个围绕（或部分围绕）元素绘制的矩形（或圆角矩形），属性还允许指定边框的样式、颜色和厚度：

border:solid black 1px;/*绘制一个1像素的黑色实线边框*/
border:3px dotted red;/*绘制一个3像素的红色点线边框*/

margin和padding都指定元素周围的空白空间。主要区别在于，margin指定边框外面--边框和相邻元素之间的空间，而padding指定边框之内--边框和元素内容之间的空间。

/*使用margin和padding属性指定元素的外边距和内边距*/
margin:5px;
padding:5px;

/*也可为元素单独的边指定外边距和内边距*/
margin-left:5px;
pading-right:5px;

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：
        Margin(外边距) - 清除边框外的区域，外边距是透明的。
        Border(边框) - 围绕在内边距和内容外的边框。
        Padding(内边距) - 清除内容周围的区域，内边距是透明的。
        Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+上内边距+下内边距+上边框+下边框+上外边距+下外边距

元素的显示和可见性

两个CSS属性影响了文档元素的可见性：visibility和display。

visibility="visible|hidden"，visible表示显示，hidden表示隐藏。display="none"表示隐藏，两者的隐藏是有区别的，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

颜色、透明度和半透明度

CSS颜色表示可使用常用的英文，如“red”、“blue”等，但是一般使用RGB或RGBA的表示，RGB表示红绿蓝三原色的配色，每种配色取值范围0～255，也可使用十六进制进行表示，每种配色取值范围0～ff，RGBA于RGB配色表示方法一致，只不过添加了透明度这一项：

/*红色*/
“red”
rgb(255,0,0)
"#ff0000"

/*红色,50%透明度，100%表示完全不透明*/
rgb(255,0,0，0.5)

也可使用opacity属性来设置透明度，该属性值是0～1之间的数字，1表示完全不透明（默认值），0表示完全透明。

部分可见：overflow和clip

overflow属性指定内容超出元素的大小时该如何显示：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

clip属性指定了元素的裁剪区域，语法为：rect(top right bottom left)。

注意：: 如果先有"overflow：visible"，clip属性不起作用。

脚本化内联样式

脚本化CSS最直截了当的方法就是更改单独的文档元素的style属性。类似大多数HTML属性，style也是元素对象的属性，它可以在JavaScript中操作。但是style属性不同寻常：它的值不是字符串，而是一个CSSStyleDeclaration对象。该style对象的JavaScript属性代表了HTML代码中通过style指定的CSS属性。

let e = document.getElementById("all_content");
e.style.fontSize = "30px";
e.style.backgroundColor = "#ee0000";
e.style.color = "#ff0000";

从上面可以看到，在CSSStyleDeclaration对象中属性名和实际的CSS属性名是有区别的，CSSStyleDeclaration对象中的属性名移除连字符（"-"），并将连字符后的首字母大写，类似于驼峰式命名规则。

脚本化CSS类

通过内联style属性脚本化CSS样式的一个可选方案是脚本化HTML的class属性值。改变元素的class就改变了应用于元素的一组样式表选择器，它能在同一时刻改变多个CSS属性。

<html>
    <head>
        <style>
            body {margin-left: 30px; margin-right: 15px;}
            p {font-size: 14px;}
            .my-span {font-size: 14px; color: red}
        </style>
    </head>
    <body>
        <p>Testing</p>
        <span class="my-span">Testing span1</span>
        <span class="my-span">Testing span2</span>
    </body>
</html>

注：文章中CSS相关知识很多都是引自菜鸟教程，有兴趣继续深入学习的同学可以去看看。

走在大前端的路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十六章：脚本化CSS

CSS概览层叠样式表（Cascading Style Sheet，CSS）是一种指定HTML文档视觉表现的标准。使用CSS可以精确地指定文档元素的字体、颜色、外边距、缩进、边框，甚至定位。 HTML文档的视觉显式包含很多变量：字体、颜色、间距等。CSS标准列举了这些变量，我们称之为样式属性。CSS定义了这些属性以指定字体、颜色、外边距、边框、背景图片、文本对齐方式、元素尺寸和元素位置。有两种方式将一组定义视觉表现的CSS属性和对应的HTML元素...
复制链接

扫一扫