CSS2笔记整理

最新推荐文章于 2023-12-16 17:07:11 发布

daisy0328

最新推荐文章于 2023-12-16 17:07:11 发布

阅读量208

点赞数

分类专栏： css笔记整理 web前端文章标签： css

本文链接：https://blog.csdn.net/daisy0328/article/details/105652352

版权

web前端同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

css笔记整理

1 篇文章 0 订阅

订阅专栏

一、概念

1、什么是css?

CSS 指层叠样式表 (Cascading Style Sheets)
渲染html到网页
css存在样式表当中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式可以层叠为一个

2、css的作用是什么？

给html标签写表现形式

3、html标签分为几种类型？

按照是否换行来分：

行级元素
块级元素（具有默认宽度100%）

根据是否闭合来分：

完全闭合
自闭和

4、css 在网页里面分为几种类型：

行内样式
内嵌样式
外部样式

二、css样式的写法规则

1、css样式里的基本属性

写法

属性：值；

css里面的颜色值

单词值
十六进制颜色值。如：#000000
rgb值，即通道值。如：rgb(114,255,255)
rgba值，通道值，带透明度。如：rgba(114,255,255,0.5)

css里面的像素单位

px 代表固定像素值，相对屏幕的分辨率的单位值。
% 百分比像素值，相对浏览器默认字体大小。
rem 相对单位，只相对于网页的html根元素的字体大小。
em 相对单位，相对当前元素文本字体大小，没有设置字体，默认浏览器默认字体大小（16px）。em的值并不是固定的，会继承父级元素的字体大小。

css里面设置宽高属性

当前元素必须是块级元素，如果要给行级元素设置宽和高，必须转化为块级元素。

基本样式

分为单属性样式、符合属性样式
color: red; 控制字体颜色的
/
font: italic bold 30px self; 设置字体样式，复合属性
font-style: italic;
font-size: 30px; 默认的属性值 larger、x-larger、small、x-small ，通常用px
font-family: serif; 设置字体的
font-weight: bold;
/
width: 200px; 设置宽
height: 200px; 设置高
/
border: 1px solid #000; 设置边框，复合属性样式
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-left-color: #000;
border-left-style: solid;
border-left-width: 1px;
/

2、行内样式

写在元素的行内，即元素的style属性上

<div style=“color:red;font-size:20px;font-family:serif;width:200px;height:200px;border:1px solid #000”>
我是div的内容
</div>

3、内嵌样式

内嵌方式

使用style标签内嵌到head标签里边、或者body标签里边（写在元素的前边或后边，一般写在后边）
style标签的属性type="text/css"可以省略不写
通过css选择器来匹配样式

css选择器

星号选择器 代表所有元素，匹配网页里面的所有元素。
element 选择器 代表元素，匹配网页里面所有同名元素。
写法：元素名称{ 样式属性 }，如：div{ color:red; }。
class选择器 代表类名称，使用.来匹配，可以多个元素公用，即多个元素使用同一名称。
写法：.类名称{样式属性}，如：.blocksmall{ color:red;font-size:12px}。
id选择器 代表id，使用#来匹配，建议id只能有一个，不能同名。
写法：#id名称{样式属性}，如：#idBlock{ color: red;font-size: 30px; }
子父选择器 ——空格和 >
空格指的是匹配当前元素的所有后代
“>” 指的是匹配当前元素的直接子元素
写法：如：ul li{color:red;border-bottom:1px solid #000;}，
ul>li{color:red;border-bottom:1px solid #000;}
复合选择器 给多个不同元素设置相同样式，使用,逗号
如：div.blocksmall，#idBlock{border-left;1px solid red}

常见问题

多个不同元素具有相同的类名称，怎么区分？
可以根据元素来区分，选择类，如：div.blocksmall{ color:red;}
.lifirst~li 匹配名称为“lifirst”的 li 后边同级的所有 li

命名class、id 的时候不要使用纯数字，数字不要开头。命名规则：可以驼峰命名（BlockSmall ）、帕斯卡命名（blockSmall）。
style标签里边只能使用 /** **/ 注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #idBlock{
        color: red;
        font-size: 30px;
      }
      ul li{
        color:red;
        border-bottom:1px solid #000;
      }
    </style>
</head>
<body>
<div id="idBlock">
    我是内嵌样式
</div>
<ul>
    <li>蔬菜
        <ol>
            <li>黄瓜</li>
            <li>西红柿</li>
            <li>辣椒</li>
        </ol>
    </li>
    <li>水果
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>巨紫荆</li>
        </ol>
    </li>
</ul>
</body>
</html>

4、外部样式

在外部写样式表（新建 stylesheet 文件），网页内部引入
外部样式和内嵌样式写法一样，选择器都可以使用
相当于把内嵌样式拿到外部文件

外部样式的引入

使用 link 标签，可以引入在 head 或 body,<link rel="" href=""/>
还可以在 style 内嵌样式里边引入，使用@import"./css/index.css";

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="./css/index.css"/>-->
    <style type="text/css">
        @import "./css/index.css";
    </style>
</head>
<body>
<button id="btn">按钮</button>
<!--<link rel="stylesheet" href="./css/index.css"/>-->
</body>
</html>

link和@import的区别：

link引入CSS时，在页面载入时同时加载；@import需要网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

三、样式的优先级

1、三大样式优先级

如果样式之间没有冲突，则样式的优先级如下，样式进行叠加

行内>内嵌>外部
——内嵌样式在外部样式加载之后（网页由上至下加载，先head再body）
行内>外部>内嵌
——外部样式在内嵌样式加载之后
即：后加载的优先级更高，相对head而言，body里边的样式优先级更高，行内样式优先级最高。

如果样式之间存在冲突，样式根据就近原则，取优先级最高的。

注意：在body里边写内嵌样式或引入外部样式时，尽量统一写在目标元素之后、或统一写在目标元素之前。

2、元素选择器优先级

内嵌样式和外部样式也存在优先级（指的是元素选择器之间的优先级）
外部样式里面的选择器优先级和内嵌样式优先级一致，如下：

id>class>element>星号
子父元素选择器优先级：根据父元素的选择器来判断，父元素的选择器优先级大于等于子元素的选择器优先级时，样式跟随div#block>button，父元素的选择器优先级小于子元素的选择器优先级时，样式跟随子元素#btnlist

例如：

<div id="block">
  <button id="btnlist"></button>
  <button></button>
</div>

备注：上例中div#block>button指的是同时设置两个 button 的样式，#btnlist指的是设置id="btnlist"的button的样式。

3、提高样式优先级

!important 写在样式属性之后，提高样式优先级。如：width: 150px !impotant;

属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用上述规则判断优先级.

四、css元素浮动

1、常用属性

float:left; 左浮动
float:right; 右浮动
float:inherit; 继承父元素的浮动
background-color:red; 块级元素背景色，常用语div元素
overflow:hidden; 超出部分隐藏
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除浮动
width:50%; 相对父元素宽度的50%
height: 50%; 相对父元素高度的50%

2、元素水平浮动

子元素默认情况下会自动撑开父元素
元素的水平浮动

float:left; 左浮动
float:right; 右浮动
元素在浮动之后会脱离文档流，不占位置

子元素浮动后，父元素撑不开，怎么处理？

方案1、给父元素设置固定高
方案2、给父元素设置超出部分隐藏
方案3、在父元素内部放置一个空的div，并设置属性clear:left； clear:right； clear:both；，用来清除浮动。如：<div style="clear:left；"></div>清除左浮动

注意：子元素浮动导致父元素的问题可以直接处理，父元素底下的兄弟元素里边的内容会受上边浮动的影响，使用上边第三种方案解决，或者在兄弟元素样式里边写清除浮动

五、css里边行元素和块元素相互转化问题

方法：给元素设置以下属性

display:inline; 转化为行元素
display:inline-block; 转化为行级块
display:block; 转化为块元素

行级块没有换行功能
多个元素转化为行级块时，行级块之间默认有间隙，处理方案？

先给父元素设置字体大小为0 font-size="0"
再给子元素设置字体大小

六、css里边的显示隐藏

使用的属性

display:block; 显示，同时元素也是块元素（给行级元素使用此属性时，元素显示的同时转化为块级元素）
display:none; 隐藏，隐藏之后脱离文档流，不占位置

七、css里边的伪类

1、:hover

:hover伪类：类似于鼠标操作；可以通过伪类属性设置鼠标操作是元素的显示形态。
写法：

<style>
  a:hover{
    color: red;
    cursor: pointer;
  }
</style>

说明：上例中a为元素选择器，cursor: pointer;为鼠标悬停时鼠标的形状。即：鼠标悬停在a元素上时，a元素变为红色，鼠标变为手形。

:link ：访问之前的伪类
:hover ：鼠标悬停伪类
:active ：激活伪类
:visited ：访问之后的伪类

用法举例：

.menu>li:hover .menuchild{
    display:block;
}

上例意为：鼠标悬停在menu的子元素li上边时，li的子元素 menuchild 显示

注意：

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。

2、:checked （css3 的内容）

仅适用于单选按钮或复选框。

+匹配器：匹配当前元素之后的同类型元素（同级元素）
~匹配器：匹配当前元素之后的所有元素（同级元素）

用法：
1、.ckbox:checked + .iconimg 或 .ckbox:checked ~ .nav点击选择当前元素时，匹配的其它元素显示的样式
2、.ckbox:checked 点击选择当前元素时，元素显示的样式

八、css 定位

css定位即元素的定位，分为以下3种：

position:absolute; 绝对定位
position:relative; 相对定位
position:fixed; 固定定位

元素默认在文档流上占位置
元素在定位之后可以多使用5个属性，分别为：

zindex:1；分层，浏览器默认层为0，层无限大、无限小
left:10px;
right:10px;
bottom:10px;
top:10px;
元素无定位时使用以上属性无效

1、相对定位

position:relative; 给元素设置相对定位，默认位置不变，相对自身的位置进行左上右下定位及分层。
相对定位之后元素默认在其它元素之上

<style>
  .par1{
      position:relative;
      left:10px;
      top:10px;
      zindex:-1;
  }
</style>

2、绝对定位

position:absolute; 给元素设置绝对定位，元素脱离文档流，不占位置，默认相对于浏览器左上右下移动。
如果让绝对定位的元素相对父元素定位，给父元素设置相对定位。

<style>
    .par{
        position: relative;
        border: 1px solid #000;
    }
    .par1{
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

3、固定定位

元素脱离文档流，设置上下左右之后（相对于浏览器上下左右），滑动滚动条，位置固定不变。
元素绝对定位或者固定定位没有宽和高，得设置
元素在绝对定位或者固定定位之后，初始位置得看前边有没有元素占位置，如果有，默认位置在这个元素下边

九、盒子模型

所有的元素都可以看作盒子，用来设计或布局时使用
以下图片说明了盒子模型
盒子模型（box model）
说明：

margin：清除边框外的区域，外边距是透明的
border：边框
padding：内容到边框的距离，内边距
content：盒子的内容，显示文本和图像

设置 外间距 margin 时需要注意：

元素设置为行级块的情况下，水平和垂直的两个元素之间的外边距是累加的。给其中一个行级块设置margin-top，和它在一个行的其它行级块会随它一起“塌陷”。
子元素全部浮动的情况下，元素之间的外边距也是累加的，元素折行时需要考虑是否会被其左边元素卡住
正常默认情况，元素上下外边距不会累加，而是走最大值

margin 复合属性

按照上右下左来设置，如：margin: 10px 20px 30px 40px;
按照上右下来设置，左和右一致，如：margin: 10px 20px 30px;，左也等于20px
按照上下左右来设置，如：margin: 10px 20px;，上下为10px，左右为20px
只设置一个值，如：margin: 10px;，上右下左都是10px

设置内间距 padding 时需要注意：

元素默认内间距为0。即：默认 content 宽高与元素本身宽高相同
元素设置内间距 padding 时，默认会把元素撑开，而 content 大小不变。即：元素的宽高会根据设置的 padding 值而增大。
最终元素宽高=元素本身设置的宽高+border+padding

如果想设置内间距，又不想撑开元素，怎么操作？
给元素设置属性 box-sizing

box-sizing:border-box; 盒内边距，让元素的边框和内间距往盒内走
box-sizing:content-box; 默认边距，相当于默认情况（一般不需要专门设置），会撑开元素
box-sizing:inherit; 继承父元素的属性

padding 复合属性
同margin。

十、css盒模型塌陷

盒模型塌陷主要指父元素塌陷，即：如果父元素里边没有内容，给子元素设置外边距 margin-top 时，会自动把父元素带下来。处理方法：

1、给父元素设置边框
2、给父元素设置超出部分隐藏 overflow: hidden;
3、给父元素设置内间距（大于0px）

相邻的行级块，给其中一个行级块设置margin-top，和它在一个行的其它行级块会随它一起“塌陷”。
让其它行级块不受影响，处理方法：

1、给此行级块元素设置相对定位，再设置top值，如：top="40px"
2、给行级块元素同时设置左浮动float: left;，再设置上边距 margin-top

十一、css里边元素的垂直对齐、文本的对齐

让父元素里边的子元素垂直对齐（靠上、居中、靠下）

子元素大小一致的情况下，使用padding让元素垂直对齐
先将子元素转化为行级块inline-block，再给父元素设置 padding 值，如：padding： 25px 0;上下内间距25px，左右内间距0px，再给父元素设置box-sizing，使元素垂直对齐
子元素大小不一致的情况下
给子元素设置属性 vertical-align: middle;，使元素垂直居中（一般建议使用这种方法）

文本水平对齐

给子元素设置 text-align: center 文本水平对齐

使用行高让文本垂直对齐

给子元素设置行高 line-height 和自身元素高度一致，单行文本垂直居中

了解：

给父元素和子元素同时设置行高line-height 和自身元素高度保持一致，使子元素垂直居中，同时单行文本垂直居中，不建议使用
给父元素设置行高line-height 和元素高度一致，单行文本垂直居中，不建议使用

daisy0328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS2笔记整理

一、概念1、什么是css?CSS 指层叠样式表 (Cascading Style Sheets)渲染html到网页css存在样式表当中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表提高工作效率外部样式表通常存储在 CSS 文件中多个样式可以层叠为一个2、css的作用是什么？给html标签写表现形式3、html标签分为几种类型？按照是否...
复制链接

扫一扫