css学习总结

最新推荐文章于 2024-05-18 03:07:39 发布

山妖的阶梯

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量797

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_51086303/article/details/118053609

版权

css总结

1 CSS的定义
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2.CSS基础语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

比如 selector{property：value}

选择器通常是需要改变样式的HTML元素。

比如 h1{color:red; font-size:14px;}
h1是选择器，color和font-size是属性，red和14px是值。

选择器的分组

   h1,h2,h3,h4,h5,h6 
   {
      color: green;
    }

3 创建CSS

样式优先级：内联样式>内部样式>外部样式
三种样式表区别：

行内样式表：优点书写方便；缺点没有实现样式和结构相分离；使用情况较少；控制范围控制一个标签(少)。

内部样式表：优点部分结构和样式相分离；缺点没有彻底分；使用情况较多；控制范围控制一个页面(中)。

外部样式表：优点完全实现结构和样式相分离；缺点需要引入；使用情况最多，推荐；控制范围控制整个站点(多)。

4 id和class选择器
ID选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。注意： id 属性不能以数字开头。

语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选择器：
class 选择器用于描述一组元素的样式，也叫做类选择器。

class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

在 CSS 中，类选择器以一个点 “.” 号来定义。

同样的类名的第一个字符也不能使用数字。

语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

5 CSS元素选择器
最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

6 CSS背景(background)
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：

background-color 背景颜色
background-image 背景图像
background-repeat 背景图像设置水平或垂直平铺或不平铺
background-position 背景图像设置定位
background-attachment 背景图像设置固定或滚动

背景属性简写：

body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}

当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat -->
background-attachment --> background-position
7 CSS外观属性
CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。

8 CSS字体 (font)
font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
font-size 和 font-family 的值是必需的，否则无效。

10 CSS列表
作用：① 设置不同的列表项标记 ② 设置列表项标记为图像
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;
修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

无序列表：
无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
有序列表：
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。

11 CSS表格
表格边框： border
表格宽度和高度：width 和 height
表格对齐：text-align 和 vertical-align
表格内边距：tr,td的padding设置
12 CSS 选择器
①分组和嵌套选择器
②属性选择器
③组合选择器
13 CSS伪类(不区分大小写)
CSS 伪类是用来向一些选择器添加特殊的效果。

语法：选择器:伪类{attr:value;}

CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}

(1)超链接伪类

在浏览器中，链接的不同状态都可以以不同的方式显示：

(2)伪类和 CSS 类(伪类可以与 CSS 类配合使用)
(3)CSS2 - :first - child 伪类

<body>
    <p>第一个 p 元素</p>
    <p>第二个 p 元素</p>
    <p>第三个 p 元素</p>
</body>

(4)CSS2 - :lang 伪类
使用 :lang 伪类可以为不同的语言定义特殊的规则：

html:lang(zh-CN){
    color:blue;
}

:lang(en)>p{
    color:gray;
}

14 CSS 伪元素
CSS 伪元素是用来为一些选择器添加特殊的效果。

语法：选择器:伪元素{attr:value;}

CSS 类也可以使用伪元素：选择器.class:伪元素{attr:value;}

(1)CSS2 - :before 伪元素

h1:before{
     content:url(images/logo.gif);
}

(2)CSS2 - :after 伪元素

h1:after{
     content:url(images/logo.gif);
}

content 的内容一般可以为四种：

content:none 该值是默认值，不插入内容。
content:“string” 插入文本。
content:attr(属性) 插入标签属性值。
content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。
15 块级元素和行内元素
块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

16 行内块元素(inline-block)
在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

17 CSS 三大特性
层叠、继承、优先级
①CSS层叠性：是指多种CSS样式的叠加。
②CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是：子承父业。
③CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
18 盒子模型（CSS重点）
CSS三大模块：盒子模型、浮动、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

19 实现居中
1 外边距实现盒子居中
满足两个条件：

①必须是块级元素。
②盒子必须指定了宽度（width）
然后给元素左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}

2 文字盒子居中

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto
20 盒子模型布局稳定性
按照优先使用宽度（width）、其次使用内边距（padding）、再次外边距（margin）。
width > padding > margin
原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug，所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题，我们经常使用宽度剩余法高度剩余法来做。
21 盒子阴影
语法： box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；
22 浮动(float)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。

23 定位(position)
position 属性值分为四种：

①static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
②relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
③absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
④fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。

山妖的阶梯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习总结

css总结1 CSS的定义主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。2.CSS基础语法CSS规则由两个主要部分构成：选择器以及一条或多条声明。每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。比如 selector{prope
复制链接

扫一扫