CSS

最新推荐文章于 2022-05-14 16:15:00 发布

justyhk

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量107

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/justyhk/article/details/104435406

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

什么是CSS

CSS(Cascading Style Sheets)又名层叠样式表,CSS可以为为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将网页想象成是一层一层的结构，层次高的将会覆盖层次低的结构，而CSS就可以分别为网页的各个层次设计样式。

CSS的位置

编写到标签内部的style属性当中（内联样式），只对当前标签起作用，不方便复用。另外由于网页的结构与表现耦合，不推荐使用。
编写到<head>中的<style>标签中（内部样式），通过CSS选择器选中指定元素，统一为某一些标签设置样式，提高复用性。

<head> 
    <style type="text/css"> 
        p{ color:red; font-size:30; } 
    </style> 
</head>

3. 编写到外部的CSS文件中（外部样式），通过<link>标签将外部的CSS文件引入到当前页面，进一步提高样式在不同页面之间的复用性，而且用户在访问使用相同css样式的网页时，利用浏览器的缓存可以加快用户的访问速度，提高用户体验。

<link rel="stylesheet" type="text/css" href="***.css">

CSS注释

CSS注释和HTML注释不同，HTML使用和XML一样的注释，CSS使用/* 注释 */。CSS注释只能够使用在style标签中，或者是CSS文件中。

CSS语法

CSS包括选择器和声明块。通过选择器可以选择页面中的指定元素，并且将声明块中的样式应用到选择器对应的元素上。声明块紧跟在选择器后面，使用 {} 括起来，声明块其实就是一组组的键值对（key : value）结构。在一个声明块中可以写多个声明，多个声明之间使用 ; 隔开。

块元素和内联元素

块元素是独占一行的元素，无论它的内容有多少，他都会独占一行。<div>是常见的块元素。

内联元素是行内元素，它只占自身的大小。<span>是常见的内联元素。

块元素主要用来为页面布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素。

注：<p>元素属于块元素，但是<p>元素不能包含任何块元素。

常用CSS选择器

元素（标签）选择器：通过元素选择器可以选择页面中的所有指定元素

标签{ ... }

2.ID选择器：通过元素的ID属性值选中唯一的元素

#ID{ ... }

3.Class选择器：通过元素的class属性值选中一组元素

.Class{ ... }

4.选择器分组（并集选择器）：同时选中多个选择器对应的元素

选择器1，选择器2，选择器3...{ ... }

5.通配选择器：用来选中页面中的所有元素

*{ ... }

6.复合选择器（交集选择器）：选择同时符合多个条件的元素

选择器1，选择器2，选择器3...{ ... }

7.后代元素选择器：选中指定元素的指定后代元素

祖先元素选择器 后代元素选择器{ ... }

8.子元素选择器：选中指定父元素的指定子元素

父元素选择器>子元素选择器{ ... }

选择器的优先级

当使用不同的选择器选中同一个元素，并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示。

优先级规则：

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

注：a.当选择器中包含多个选择器时，应该将其包含的所有选择器优先级相加再比较。但是选择器优先级的叠加不会超过其最大数量级。

b.如果选择器优先级一样，则使用靠后的样式。

c.并集选择器的优先级单独计算。

d.如果在样式最后，加一个！important，则此时改样式将会获得一个最高优先级。（开发中尽量避免）

样式的继承

在CSS中，祖先元素的样式，会被其后代元素所继承。利用继承可以将一些基本的样式设置给祖先，这样所有的后代元素将会自动继承这些样式。

注：并不是所有的样式都会被后代元素所继承，比如：祖先元素背景相关的样式都不会被后代元素继承

定位

相对定位：

当开启了元素的定位（position设置为非static）以后，如果不设置偏移量，元素不会发生任何变化
position:relative;

可以通过left、right、top、bottom四个属性来设置元素的偏移量。

left：右移（相对左边的位置） right：左移（相对右边的位置） top：下移（相对上面的位置） bottom：上移（相对下面的位置）

2.绝对定位

position:absolute;

开启绝对定位会使元素脱离文档流（即脱离当前图层上浮一个图层），但元素的位置不会变化。绝对定位是相对于离它最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位则会相对浏览器的窗口进行定位。绝对定位会改变元素的属性，内联元素变成块元素，块元素的宽度和高度默认被内容撑开。

3.固定定位

position:fixed;

固定定位也是一种绝对定位，它的大部分特点与绝对定位一样，不同的是：

1.固定定位永远都会相对于浏览器窗口进行定位，它会固定在窗口的某个位置，不会随滚动条滚动。

2.IE6不支持固定定位。

justyhk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS什么是CSSCSS(Cascading Style Sheets)又名层叠样式表,CSS可以为为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将网页想象成是一层一层的结构，层次高的将会覆盖层次低的结构，而CSS就可以分别为网页的各个层次设计样式。CSS的位置编写到标签内部的style属性当中（内联样式），只对当前标签起作用，不方便复用。另外由于网页的结构与表现...
复制链接

扫一扫