CSS 学习笔记

最新推荐文章于 2024-10-18 18:45:22 发布

OnionZuo

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量230

点赞数

分类专栏：学习笔记文章标签： CSS 前端学习笔记

本文链接：https://blog.csdn.net/OnionZuo/article/details/88970969

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS 学习笔记

1 结构
- 1.1 外结构
- 1.2 内结构
2 CSS的性质
3 属性

层叠样式表 (Cascading Style Sheets)

1 结构

1.1 外结构

分类：内联式、嵌入式、外部式（按CSS 样式代码插入的形式来分类）

优先级（相同权值）：内联式 > 嵌入式、外部式
外部式和嵌入式，在后面的优先度更高。

内联式：把CSS代码直接写在现有的HTML标签中。

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式：把CSS样式代码写在<style type=“text/css”></style>标签之间。

<style type="text/css">
	table tr td,th{border:1px solid #000;}	/*表格边框*/
</style>

外部式（外联式）：把css代码写一个单独的外部文件中，这个CSS样式文件以“.css”为扩展名，在 <head> 内使用 <link href=“base.css” rel=“stylesheet” type=“text/css” /> 标签将CSS样式文件链接到HTML文件内。

/*rel="stylesheet" type="text/css" 是固定写法不可修改。*/
<link href="base.css" rel="stylesheet" type="text/css" />

1.2 内结构

使用 /*注释语句*/ 进行注释

形式：

类别：

选择器{样式;}
.类选择器名称{样式;} 使用class="类选择器名称"为标签设置一个类。
#id选择器{样式;} 使用id="id名称"为标签设置id。
1. id名称是唯一的
  1. <span id=“stressid”> <span id=“stressid”> ×
2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。
  1. <span class=“stressid bigsizeid”> √
  2. <span id=“stressid bigsizeid”> ×
选择器>子选择器{样式;} 用于选择指定标签元素的第一代子元素。

/*例子*/
.first>span>span{border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>。

选择器包含选择器{样式;} 加入空格，用于选择指定标签元素下的所有后代元素。
* {样式;} 通用选择器，匹配html中所有标签元素。
选择器:伪类选择器{样式;} 伪类选择符，它允许给HTML不存在的标签（标签的某种状态）设置样式

a:hover{color:red;}	/*为a标签鼠标滑过的状态设置字体颜色变红*/

选择器,选择器{样式;} 分组选择符为多个标签元素设置同一个样式

2 CSS的性质

继承性：CSS的某些样式具有继承性，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。但有一些CSS样式是不具有继承性的。如border:1px solid red;

/*具备继承性*/
p{color:red;}	
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

/*不具备继承性*/
p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

特殊性：同一个元素如果被设置了不同的CSS样式代码，浏览器根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

p{color:red;}
.first{color:green;}
#brave{color:blue;}
<p>一年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*red*/
<p class="first">二年级时，我仍旧是一个<span>胆小</span>的小女孩。</p>	/*green*/
<p class="first" id="brave">三年级时，我是一个<span>非常勇敢</span>的小女孩。</p>	/*blue*/

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠：同一个元素有多个CSS样式存在且具有相同权重时，会根据这些CSS样式的前后顺序来决定，处于最后面的css样式会被应用。（后面的样式会覆盖前面的样式。）

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*green*/

重要性：用!important来为某些样式设置最高权值

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>	/*red*/

注意：!important要写在分号的前面

当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。

优先级：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important

3 属性

3.1 字体

font-style:italic; 斜体

font-variant:small-caps; 小型大写字母字体

font-weight:bold/normal; 字体加粗/不加粗

font-size:12px; 字体字号

line-height:1.5em; 行高

font-family:“Microsoft Yahei”,sans-serif; 字体（中文/英文）

缩写：

至少要指定 font-size 和 font-family 属性，其他的属性如未指定将自动使用默认值。
在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

color:#336699; 字体颜色

color:red; 英文命令颜色
color:rgb(133,45,200); RGB颜色（0-255）

color:rgb(20%,33%,25%); RGB颜色（0%-100%）
color:#0033ff; 十六进制颜色：将RGB每一项的值由 0-255 变成了十六进制 00-FF

缩写： 如果每两位的值相同，可以缩写一半。color:#36f;

text-decoration:underline; 下划线

text-decoration:line-through; 删除线

3.2 段落

text-indent:2em; 缩进

line-height:2em; 行间距，行与行之间的基线间的距离

letter-spacing:20px; 文字间距

word-spacing:20px; 单词间距

text-align:center/left/right; 文字设置居中/左对齐/右对齐

3.3 其他属性

<ul>：list-style:none;

<table>：vertical-align：middle;

3.3 盒模型

display:block; 将元素转变为块状元素

display:inline; 将元素转变为内联元素

display:inline-block; 将元素转变为内联块状元素

元素实际宽度（盒子的宽度）= 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界

border:1px solid red; 边框宽度/样式/颜色

border-width:thin/medium/thick/2px; 边框宽度（细/中/粗/像素）
border-style:solid/dashed/dotted; 边框样式（实线/虚线/点线）
border-color:#888; 边框颜色
border-top:1px solid red; 上边框
border-right:1px solid red; 右边框
border-bottom:1px solid red; 下边框
border-left:1px solid red; 左边框

padding:20px 10px 15px 30px; 填充（上右下左 (顺时针)）

padding-top:20px; 上填充
padding-right:10px; 右填充
padding-bottom:15px; 下填充
padding-left:30px; 左填充

margin:20px 10px 15px 30px; 边界（上右下左 (顺时针)）

margin-top:20px; 上边界
margin-right:10px; 右边界
margin-bottom:15px; 下边界
margin-left:30px; 左边界

缩写： padding 和 margin 如果上下左右宽度一样，可缩写为：margin:20px;，如果上和下宽度一样、左和右宽度一样，可缩写为：margin:20px 10px;

3.4 布局模型

流动模型（Flow）- 默认
浮动模型 (Float)
层模型（Layer）

流动模型：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。块状元素的宽度都为100%。以行的形式占据位置。
内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型：

让两个块状元素并排显示

float:left; 设置元素浮动（左）

float:right; 设置元素浮动（右）

层布局模型:

每个图层能够精确定位操作。在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

层模型有三种形式：

position:absolute 绝对定位

这条语句的作用将元素从文档流中拖出来，然后使用 left right top bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

position:relative 相对定位

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left right top bottom 属性确定，偏移前的位置保留不变，不会被后面的元素覆盖。

position:fixed 固定定位

fixed：它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化。固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed; 属性功能相同。

position:absolute 和 position:relative 组合使用（相对于其它元素进行定位）

参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1">	<!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div>	<!--相对定位元素-->
</div>

参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;
}

定位元素加入 position:absolute; 便可以使用 left right top bottom 来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

3.5 长度单位

相对单位

px 像素

像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

em

是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

p{font-size:14px}
span{font-size:0.8em;}

<p>以这个<span>例子</span>为例。</p>

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

% 百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

3.6 水平居中

（行内元素块状元素）

行内元素

text-align:center/left/right 文本对齐（居中/左/右）

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

块状元素

（定宽块状元素不定宽块状元素）

定宽块状元素： 块状元素的宽度width为固定值

margin:0 auto; = margin-left:auto; + margin-right:auto;

满足定宽和块状两个条件的元素可以通过设置 “左右 margin 值” 为 auto 来实现居中的。

注意：元素的 “上下 margin” 是可以随意设置的。
不定宽块状元素： 块状元素的宽度width不固定

例如网页上的分页导航，因为分页的数量是不确定的，所以不能通过设置宽度来限制它的弹性。

有三种方法居中（这三种方法目前使用的都很多）：

加入 <table> 标签

利用 <table> 标签的长度自适应性—即不定义其长度也不默认父元素 <table> 的长度（<table> 其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的 margin 的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 <table> 标签（包括 <tbody> <tr> <td>）

第二步：为这个 <table> 设置 margin:0 auto;
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置。

改变块级元素的 display 为 inline 类型，然后在其父级元素中使用 text-align:center 来实现居中效果。

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
设置 position:relative; 和 left:50%;：利用相对定位的方式，将元素向左偏移 50% ，达到居中的目的。

通过给父元素设置 float:left;，然后给父元素设置 position:relative; 和 left:50%;，子元素设置 position:relative; 和 left:-50%; 来实现水平居中。

3.7 垂直居中

（父元素高度确定的单行文本父元素高度确定的多行文本）

父元素高度确定的单行文本

通过设置父元素的 height 和 line-height 高度一致来实现的。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

父元素高度确定的多行文本

使用插入 <table> 标签（包括 <tbody> <tr> <td>），同时设置 vertical-align：middle

CSS中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

因为 td 标签默认情况下就默认设置了 vertical-align:middle，所以我们不需要显式地设置了。
设置块级元素的 display:table-cell（设置为表格单元显示），激活 vertical-align 属性

好处：是不用添加多余的无意义的标签。

弊端：这种方法兼容性比较差（在 chrome、firefox 及 IE8 以上的浏览器下可用，但IE6、7 并不支持）。而且这样修改 display 的 block 变成了 table-cell，破坏了原有的块状元素的性质。