CSS总体概述

最新推荐文章于 2024-10-02 15:35:50 发布

丁一9527

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量191

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_43383323/article/details/109166530

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS总体概述

CSS概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

基础语法

由选择器和一条或多条声明（CSS 对大小写不敏感）组成

selector {declaration1; declaration2; ... declarationN }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4RW4wy97-1603105200994)(md图片/image-20201018220141742.png)]

CSS可以在页面中编写，也可以统一写成一个css，在页面之外独立为一个.css文件

如果在页面内写css语句，将样式写到style中，称为内联样式，内联样式只对当前的元素中的内容起作用且不方便复用

<style type=“text/css”> </style>

如果把CSS样式统一编写到外部的样式表中

完全式结构和表现分离，可以使样式表在不同的页面中使用，最大限度的使样式可以进行复用，并且外部css文件可以加速访问速度。

例如：<link rel=“stylesheet” type=“text/css” href=“style.css” />

1.样式可以继承，子元素可以继承父元素的样式，并不是所有的样式都会被继承，背景相关的样式都不会被继承。

2.选择器之间有优先级，使用不同的选择器选中同一个元素时，样式之间可能有冲突（优先级内联样式 > id选择器 > 类和伪类 > 元素选择器 > 通配* > 优先级继承）

如果选择器为内联样式+id选择器那么其优先级大于内联样式

id选择器

在现代布局中，id 选择器常常用于建立派生选择器

格式：#id{}

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

ID选择器的注意事项：

1.在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

2.ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

3.可以独立于元素来选择 ID。

4.类选择器和 ID 选择器可能是区分大小写的（取决于文档的语言，HTML和XHTML区分大小写）。

class选择器（类选择器）

在 CSS 中，类选择器以一个点号显示

使用方法和id选择器一样，但是可以重复，还可以给一个标签设置多个class

格式： .classname{}

**注意：**类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

并集选择器(都可以选）

对于符合h1或id为111或.classname的元素标签，都会被设置样式

格式：h1,#111,.classname{}

交集选择器

对于符合h1和id为111和.classname的元素标签，都会被设置样式

格式：h1#111.classname{}

统配选择器

对于所有的标签都设置相应的样式

格式：*{}

派生元素选择器

派生元素选择器有后代选择器，子元素选择器，相邻兄弟选择器

后代元素选择器

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

格式：div span{} 只会选择div下的span

/* 如果希望只对 h1 元素中的 em 元素应用样式，可以这样写： */
h1 em {color:red;}

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素（限制更高）。

格式：div > span{} 只会选择div下的span

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

/*如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：*/
h1 + p {margin-top:50px;}

伪类选择器

伪类专门用来表示元素的一种特殊状态，比如访问过的超链接，普通超链接，获取焦点的文本框。当需要为处在这些特殊状态的元素设置样式时，就可以设置这些伪类

例如对于a标签：

a:link 没访问过的链接

a:visited 访问过的链接

a:hover 鼠标滑过的链接

a:active 正在点击的链接

伪类a的优先级,涉及到a的伪类有 link，visited，hover，avtive，四个优先级是一样的 ,四个优先级由代码优先顺序实现.

   a:hover{
       color:green;
       background-color:aqua;
    }
   input:focus{
       background-color:aqua;
   }

属性	描述	CSS
[:active]	向被激活的元素添加样式。	1
[:focus]	向拥有键盘输入焦点的元素添加样式。	2
[:hover]	当鼠标悬浮在元素上方时，向元素添加样式。	1
[:link]	向未被访问的链接添加样式。	1
[:visited]	向已被访问的链接添加样式。	1
[:first-child]	向元素的第一个子元素添加样式。	2
[:lang]	向带有指定 lang 属性的元素添加样式。	2

伪元素选择器

伪元素表示元素中的特殊的位置

伪类，伪元素以及两者之间的关系可以参看下列链接：

https://zhuanlan.zhihu.com/p/46909886

放一个总结图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8b6VyK8-1603105200997)(md图片/image-20201019184406050.png)]

属性选择器

有某某属性的某某标签标签会被设置
1.可以在[ ]中设置为titile，表示有titile的标签
2.也可以具体一点为，[ ]中，titie=“ab",特指这一个标签

例如：

   /*
		带有title属性的p标签的样式将被设置
			*/
	p[title]{
        background-color:aquamarine;
    }

/*下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：*/
	[title~=hello] { color:red; }
/*为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：*/
	a[href][title] {color:red;}

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

颜色

css中用RGB三原色 0-255（或百分比）表示红绿蓝三色的深浅，也可以用十六进制表示颜色或三组两位的十六进制数组来表示一个颜色

语法（ #红色绿色蓝色）：
background-color:rgb(161,187,215)
background-color:rgb(20%,10%,30%)
background-color:#1232ff

字体

字体可以分为衬线字体，非衬线字体，等宽字体，草书字体，虚幻字体。字体在网页中显示时，都放在看不见的格中， font_size设置的是格的高度，颜色可以用十六进制RGB表示。

css中可以直接用font设置 五个字体样式 （文字大小和字体（两个必须有）必须是倒数第二个和第一个）

font-style （字体风格，斜体，倾斜）
font-variant 字体变形（小型大写字母）
font-weight 文本粗细
font-size/line-height 字体大小
font-family 字体系列

css中没有行间距，但是有行高（line-height）文字默认在每一行垂直居中显示

其余的属性

background-color 字的背景颜色

text-decoration 设置文本的上下划线,删除线

direction 设置文本方向 ltr 从左到右 rtl 从右到左 inherit 继承父元素direction

word-spacing 单词之间的距离
letter-spcing 字符间距
text-indext 首行缩进

text-align 水平对齐，它会影响一个元素中的文本行互相之间的对齐方式值

left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

word-spacing 改变字之间的标准间隔，其默认值normal与设置值为0是一样的，正值增加，负值减少

text-transform 处理文本的大小写。这个属性有 4 个值：none,uppercase,lowercase,capitalize

text-decoration 文本装饰，有四个值：none,underline(下划线),overline（上划线）,line-through（删除线）,blink（闪烁）

text-align:center 与CENTER标签的区别

text-align:center 与 <CENTER> 元素的作用大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。

text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

块元素

块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。

使用 margin 属性来水平对齐

可通过将左和右外边距设置为 “auto”，来对齐块元素。

注释：1.除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

2.如果宽度是 100%，则对齐没有效果。

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

浮动和高度塌陷

块元素在文档流中默认垂直排列，但是使用float来使元素浮动，从而脱离文档流如果浮动元素上面是没有浮动的块元素，浮动元素不会超过块元素，也不会盖住文字，浮动的元素宽度只和内容有关，不会占据父元素的百分之百
而内联元素不能设置宽高，但是开启浮动之后会变成块元素（一旦脱离文档流，全都是块元素）

浮动用来做文字环绕图片

但是浮动也会带来高度坍塌问题，父元素会被子元素撑开，但是当子元素浮动时，父元素将无法被此子元素支撑，导致高度塌陷

解决方法1：通过另外设置一个box，div同时运用clear：both解决高度塌陷问题

clear 可以用来清除其他兄弟元素对当前元素的影响
none （默认值）清除浮动 left （清除左侧浮动影响）， right ，both

解决方法2：通过BFC解决高度塌陷
每个元素都有一个隐含的属性BFC，开启元素的BFC之后，元素特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.父元素开启BFC之后可以包含浮动子元素
开启BFC的方法：
1.设置元素浮动 ->会使父元素宽度丢失，下方元素会上移
2.设置元素绝对定位 ->会使父元素宽度丢失，下方元素会上移
3.设置元素为inline-block ->会使父元素宽度丢失
display：inline-block
4.将元素的overflow设置为一个非visible的值（例如hidden）

轮廓

**绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。**CSS outline 属性规定元素轮廓的样式、颜色和宽度。

outline 在一个声明中设置所有的轮廓属性（CSS2）
outline-color 设置轮廓的颜色（CSS2）
outline-style 设置轮廓的样式（CSS2）
outline-width 设置轮廓的宽度（CSS2）

框模型

盒子分为 内容区（放子元素），内边距，边框和外边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t3oe4yAt-1603105200998)(md图片/image-20201018202820148.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moJinl35-1603105201005)(md图片/image-20201019181409073.png)]

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：

1.背景应用于由内容和内边距、边框组成的区域。

2.内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

3.外边距可以是负值，而且在很多情况下都要使用负值的外边距。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

内边距

内边距属性

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

内边距的百分比数值

可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

外边距的单边属性与内边距类似

值复制规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vszXOmNC-1603105201006)(md图片/image-20201019182650688.png)]
p {margin: 0.5em 1em 0.5em 1em;}
/*上下两者等价*/
p {margin: 0.5em 1em;}

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK1er8tb-1603105201007)(md图片/image-20201019182835828.png)]

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VOsR457k-1603105201008)(md图片/image-20201019182926437.png)]

外边距甚至能与自己发生合并（上下外边距），假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwBLhf7U-1603105201009)(md图片/image-20201019183002605.png)]

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRNVmykN-1603105201010)(md图片/image-20201019183017916.png)]

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

边框（元素内容和内边距之间）

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

可以统一设置值为solid/dotted/dashed/double

也可以定义单边样式：border-top-style，border-right-style，border-bottom-style，border-left-style，

边框颜色： border-color，也可以像边框样式一样定义单边颜色

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在文档流中
块元素
在文档流中独占一he行，自上向下排列，
        2. 默认是父元素的100%
        3. 块元素在文档流中的高度默认被内容撑开 
内联元素

1.只占自身大小，默认从左向右排列，一行不够就会换到下一行
2.宽和高都是被内容撑开

当元素的高宽是auto时，指定内边距不会影响可见框的大小，而是自动改变宽高，适应内边距

下面用一段代码演示div的样式

 .box1{
            width:100px;
            height:300px;
            background-color:aqua;

            /*
                边框必须指定三个样式
                 border-width  宽度
                 border-color  颜色
                 border-style  样式
            */
            border-width:20px 30px 40px 50px;
            border-color:crimson;
            border-style:solid;

            /*
                padding  盒子内容区和内边框之间的距离
                  top  bottom  right left 来设置四个方向
            */
          padding:10px 20px 30px 10px;
          margin:20px 10px 30px 50px;
        }
        /*
            盒子的大小和内容区，内边区和边框决定

            外边距是盒子和盒子之间的距离，不会影响盒子大小，但是会影响盒子的位置
            margin（top，right，bottom ，left） ，外边距也可以是负值

            垂直方向的外边距 ，会发生重叠（盒子相邻，垂直方向）  上盒子下边距和下盒子上边距会重叠，取最大值
        对于嵌套的两个盒子，两个盒子的外边距会重叠，可以使用border  padding margin都可以使其外边距不重叠


            内联元素不能设置width和height  但是有垂直方向的内边距，但是不会影响页面的布局（会覆盖下面的元素），边框也可以有，不会影响布局。并且支持水平外边距，水平方向的外边距不会重叠而是求和
        */
        a{
            background-color:antiquewhite;
            width:200px;
            height:20px;
            display:block;

        }
        /*
            display
            将内联元素变成块元素
              inline  元素转化为内联元素
              bolck  转化为块元素
              inline-block  设置为行内块元素，既有行内元素特点  也有块元素特点，既可以设置宽高，又不会独占一行

            display  还可以设置元素的隐藏和显示
                visible  默认值  元素默认显示
                hidden  元素不显示，但是地方还占着
                none   不显示不占地方
        */

        .over1{
            width:100px;
            height:100px;
            background-color:blueviolet;
        }
        .over2{
            width:50px;
            height:200px;
            background-color:aqua;
            overflow:visible;
        }
        /*
			over2是over1的子元素
           但是子元素设置的比父元素还大，子元素超过的一部分就会显示在父元素外
            通过overflow 属性设置如何处理溢出内容：
              visible  内容自然溢出
              scoll  父元素内出现滚动条  不论是否溢出都显示
              hidden  溢出部分隐藏不显示
               auto  会根据需求自动添加滚动条****
        */

背景

通过代码学习背景的使用

    .box{
        width:5000px;
        height:5000px;
        background-image:url(123456.jpg);
        background-color:aqua;
        background-repeat:no-repeat;
        background-position:center top;

        /*
        box的尺寸设置小了显示不全，大了会重复图片
          
       background-repeat  设置是否重复的值
                         repeat  纵横向都重复
                        no-repeat  都不重复
                        repeat-x  横轴重复
                        repeat-y 纵轴重复

        background-position指定背景图片的位置 
        				top right left bottom center至少两个值
                    	只写一个值 第二个默认是center，也可以指定两个偏移量
        				假设你希望用百分数值将图像在其元素中居中，这很容易。
        				也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
        						background-position:50% 50%;
        
        background-attachment		 是否防止背景随页面滚动。
        			如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
                    通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
              			background-attachment:fixed
	



        */
    }

定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为***一块内容***，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待.

        .box2{
            background-color:green;
            height:200px;
            width:200px;
            position:absolute;
            left:300px;
            top:100px;
            /*定位 将指定元素摆放到指定位置
                position
                    static 默认值  元素无定位
                    relative 开启元素相对定位（ 相对定位不会改变元素性质）
                    absolute 开启元素的绝对定位
                    fix  开启元素的固定定位（绝对定位的一种）


               
		开启定位需要设置偏移量 left right top bottom  
            相对定位
            	设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
                元素相对于原来的位置某侧的偏移量
                定位元素不脱离文档流
                定位元素会提升一个层级

            开启绝对定位会脱离文档流
                绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
                如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口定位
                绝对定位会使元素提升一个层级
                绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
        
             固定定位
            	永远相对于浏览器定位，但是也会固定在浏览器窗口某个位置

            定位会有层级 
                通过z-index可以设置每一个的层级（必须先开启定位）
                父元素层级永远不会盖住子元素

            opacity属性可以设置透明值 0-1之间的数
                ie8独有的filter设置透明度  0-100
                */

        }

附：

块元素(独占一行）

常见的块元素：

div（没有语义） p(段落） h1（标题） h2 h3…块元素都是独占一行的元素

内联元素：（行内元素/内联元素），只占自身大小的元素，不会占用一整行
常见的内联元素：
a img iframe span（没有语义，专门用来选中文字，为文字设置样式）

块元素用来做页面的布局，内联元素主要用来选中文本设置样式

2.给列表设置列表风格

ul{
  list-style:georgian;       
}

注意事项

Internet Explorer Behaviors

它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。

*为什么要避免它？*只有 Internet Explorer 支持 behavior 属性。

*用什么代替？*请使用JS 和HTML　ＤＯＭ取而代之。

            通过z-index可以设置每一个的层级（必须先开启定位）
            父元素层级永远不会盖住子元素

        opacity属性可以设置透明值 0-1之间的数
            ie8独有的filter设置透明度  0-100
            */

    }




附：

1.

> 块元素(独占一行）
>
> 	常见的块元素：
>
> 		div（没有语义）   p(段落） h1（标题） h2 h3.....块元素都是独占一行的元素
>
> 内联元素：（行内元素/内联元素），只占自身大小的元素，不会占用一整行
>     常见的内联元素：
>       a  img iframe  span（没有语义，专门用来选中文字，为文字设置样式）
>
> **块元素**用来做页面的布局，**内联元素**主要用来选中文本设置样式

2.给列表设置列表风格

```css
ul{
  list-style:georgian;       
}