CSS笔记

Posted 2023-05-28 Lxx4

概述

　　简介：用于设置文本内容，图片外形，版面的布局和外观显示样式。

　　组成：css由选择器及声明两个重要部分组成

　　语法：选择器声明，声明为键值对形式，选择器分为

1. 基础选择器
2. 复合选择器

　　引入方式：

1. 行内样式表（行内式）：在标签内部的 style 属性中设定css样式
2. 内部样式表（嵌入式）： 单独放到一个 <style> 标签中
3. 外部样式表：css代码放在 .css 文件中，在HTML页面，用 <link> 标签引入这个文件

　　CSS初始化：为消除不同浏览器对HTML文本的差异，需要重设浏览器的样式CSS

 

---

 

基础选择器

　　基础选择器由单个选择器组成

• 标签选择器 ：用HTML标签名称作为选择器
• 类选择器 ：语法  .类名，配合class属性调用，长名称可用 中横线- 或 下横线_ 隔开。一个标签可以添加多个类名，公共的类，独有的类分开调用可节省代码，统一修改
• id选择器：语法 #id名，具有唯一性
• 通配符 ： 语法 * ，选中所有标签

复合选择器

　　对基础选择器进行组合形成的

• 后代选择器： 语法   祖先 后代；空格隔开
• 子选择器： 语法  父 > 子
• 并集选择器： 语法   选择器1,选择器2
• 伪类选择器：语法  选择器:伪
  1. a:link  未被访问
  2. a:visited  已被访问
  3. a:hover  鼠标悬停
  4. a:active  鼠标活动（正在点击）
  5. ！以上需按顺序写 ！
• focus伪类：语法  选择器:focus，用于选取获得焦点的表单元素

 

---

 

CSS字体属性

　　定义字体系列、大小、粗细、文字样式

• font- family  属性，定义字体系列。字体之间逗号隔开，多个单词组成则空格断开并加引号
• font-size 属性，定义字体大小（px），标题需要单独改
• font-weight 属性，定义字体粗细，值可以是关键字或100-900的数值，
• normal 默认
• bold 粗体
• 400 = normal
• 700 = 加粗
• font-style 属性，定义文本风格
  • normal  默认标准
  • italic 斜体
• 复合属性写法  font: font-style  font-weight  font-size/height  font-family

　　复合写法不能更改顺序，font-size 和 font-family 不能省略

 

---

 

CSS文本属性

　　定义文本的外观：文本颜色、对齐、装饰、缩进、行间距

• color 属性，定义文本颜色，常用十六进制
• text-align 属性，定义文本水平对齐方式，也能设置盒子里的行内和行内块的水平对齐方式
  • left  左对齐
  • right 右对齐
  • center（居中对齐）
• text-decoration 属性，定义文本的修饰（下划线等）
  • none 默认，无装饰
  • underline 下划线
• text-indent 属性，定义文本的首行缩进，单位px或em（em：相对单位，指当前元素1个文字的大小）
• text-height 属性，定义行与行之间的距离，单位px。单行文字垂直居中，只需让行高等于height

　　没有简写属性

---

 

CSS显示模式

　　1. 块级元素特点：

• 独占一行
• 高、宽、内外边距可控制
• 块级里面可以放行内或块级
• 宽度默认是父级的100%
• ！注意文字类元素内不能放块级，如p，h1~h6 ！

　　2. 行内元素特点：

• 一行显示多个
• 设置宽高无效
• 行内里只能放行内
• 宽度默认为内容的宽度
• ！注意链接里不能放链接 。需要注意的是，<a>里可以放块级，转换下模式更安全！

　　3. 行内块：

• 一行显示多个
• 默认宽度是内容宽度
• 高、宽、边距可控制

　　显示模式转换 通过属性display，语法：

• 转为块     display: block;
• 转为行内 display: inline;
• 转为行内块 display: inline-block;

---

 

CSS背景属性

　　给页面元素添加背景样式

• background-color 属性，设置背景颜色
  • color，十六进制，css3新增→rgba()
  • transparent ：默认，透明
• background-image 属性，设置背景图片
  • none：默认无背景图片
  • url(url)：背景图片的url地址
• background-repeat 属性，设置背景平铺
  • repeat：默认，重复背景图片铺满盒子
  • no-repeat：不重复
  • repeat-x：只重复x轴
  • repeat-y：只重复y轴
• background-position 属性，设置背景图片位置
  • 方位名词： top ， center ， bottom， left ， center ， right，只写一个值则默认另一个为center，没有顺序要求
  • 精确单位：x  y; 严格按照顺序，另外若只写x，则默认y垂直居中
  • 混合单位：按x y 顺序，单位结合前两者
• background-attachment 属性，设置背景图片固定或滚动
  • scroll：滚动
  • fixed：固定

　　复合写法：

　　background: 背景颜色  图片地址  平铺  滚动  位置;（无严格顺序要求，只是推荐顺序）

---

 

CSS三大特性

1. 层叠性：样式冲突，执行离结构近的
2. 继承性：子元素会继承父元素的某些样式，如text-，font-，line-，color。行高的继承：可设为当前元素文字大小的倍数
3. 优先级：选择器的权重。权重不会进位；继承的权重是0，不管父元素权重多高；复合选择器会有权重叠加

　　　　    * 和 继承       0000

　　　　元素选择器    　0010

　　　　   ID选择器　 　0100

　　　   　行内样式　 　1000

　　　 　!important         无穷大

 

---

 

CSS盒模型

　　边框border

• border-style属性，值：

　　　　solid 实线

　　　　dashed 虚线

　　　　dotted 点线

• 复合写法（无顺序要求）  border：border-width border-style border-color;  

　　　内边距padding   

　　　边框与内容之间的距离，padding会撑大盒子，但如果盒子本身没有width和height则不会撑大。复合写法的四种情况

1. padding:5px;                               上下左右都是5px
2. padding:5px 10px;                      上下5，左右10
3. padding:5px 10px 20px;             上5，左右10，下20
4. padding:5px 10px 20px 30px;    上5，右10，下20，左30（顺时针）

　　tips：盒子内容字数不一时，可以不给盒子宽度，而是给一样的左右padding撑开

　　外边距margin

　　盒子与盒子之间的距离，复合写法与padding一致

　　tips：

　　1. 让块级盒子水平居中

• 盒子必须指定宽度（width），盒子左右外边距为auto
• ！行内元素和行内块水平居中：给其父元素添加text-align: center; ！

　　2. 垂直外边距合并

　　解释：两个相邻盒子的垂直外边距会发生合并，只取那个较大值。

　　解决：尽量只设一个盒子的margin

　　3. 嵌套块元素垂直外边距塌陷

　　解释：给子元素添加垂直外边距，此时子元素和父元素的外边距相邻，效果会实现在父元素身上。解决方法：

• 给父元素填加overflow:hidden;
• 给父元素添加外边距
• 给父元素添加边框

---

 

圆角边框　

　　语法 border-radius:length;　

　　原理：圆与边框的交集形成圆角效果，CSS3新增

　　参数值：数值或百分比。若写多个数值，从右上角开始逆时针分配数值；也可以通过border-top-left-radius的方式分开写不同角的效果。

　　tips：

　　　　正方形→圆：把数值改为高或宽的一半，或改为百分比50%

　　　　矩形→圆角矩形：数值改为高的一半

 

---

 

盒子阴影

　　CSS3新增，阴影不占空间

　　语法 box-shadow:h-shadwo  v-shadow  blur spread  color  inset;

　　　　h-shadow：水平阴影，可填正或负值

　　　　v-shadow：垂直阴影，可填正或负值

　　　　blur：虚实程度，数值越大越虚

　　　　spread：阴影的尺寸

　　　　color：阴影颜色，rgba( )

　　　　inset：设置内外阴影，默认是outset外阴影（这个默认词不要写进语法里）

 

　　文字阴影语法  text-shadow: h-shadow v-shadow blur color;

 

---

 

浮动

　　文档流概念：默认排列方式

　　浮动作用：浮动可以让块级元素在一行显示且无空隙（行内块虽然一行显示但默认有空隙）。原先浮动的出现是为了实现文字环绕图片的效果，现在依然可以。

　　float属性：创建浮动框，值如下

1. none
2. left
3. right

　　浮动的特性：

1. 脱离标准流
2. 不保留原先的位置
3. 一行显示且顶端对齐排列
4. 具有行内块特性（任何元素浮动后）
5. 块级元素浮动后，大小由内容决定（原先块级默认和父级一样宽）
6. 行内浮动后可以设置宽高大小　　

　　tips：

• 先用标准流排列上下，之后内部子元素采取浮动排列左右
• 先设置盒子大小，再设置位置
• 兄弟元素要一起浮动
• 浮动的盒子只影响后面的标准流，不影响前面的标准流

 

---

 

清除浮动

　　解释：父级没高度，但父盒子里的子盒子浮动了，导致没有内容撑起父级的高度，便会影响下面布局，此时需要清楚浮动的影响

　　语法：选择器 clear: both

　　清楚浮动的方法：

• 隔墙法，在浮动元素的末尾额外添加一个空的块级标签，然后给这个空标签添加清除浮动的样式
• 为浮动元素的父级添加 overflow:hidden;
• ::after伪元素法，利用伪元素实现隔墙法，同时实现样式结构分离，需要时调用这个类

.clearfix::after 
    content: \'\';
    display: block;
    clear: both;
    /* 隐藏盒子,在网页中看不到这个伪元素 */
    height: 0;
    visibility: hidden;

• ::after和::before双伪元素清除浮动

.clearfix::before,
.clearfix::after 
    content: \'\';
    display: table; /* 转为块并一行显示 */


.clearfix::after 
    clear: both;

---

定位

　　定位=定位模式+边偏移

　　优势：定位的优势在于可以自由移动或固定在某个位置，且可以压住其他盒子

1. 静态定位static

• 默认的，无定位，无边偏移

1. 相对定位relative

• 相对自身原来的位置移动

• 占有原来的位置，不脱标

1. 绝对定位absolute

• 相对于它的祖先元素移动
• 无祖先或祖先元素无定位则以浏览器为准定位
• 以最近的、有定位的祖先元素为参考点
• 不占原先位置，脱标

　　　　子绝父相

　　　　　　父级盒子负责布局，一般需要占位置，所以用相对定位；子级盒子用绝对，不占位置也不影响兄弟盒子

　　　　　　父盒子加定位限制子盒子在父元素内，如果父元素不用占位置，也可以子绝父绝

　　　　绝对定位的盒子居中

　　　　　 解释：加了绝对定位的盒子无法通过margin:0 auto;实现水平居中

　　　　　　解决：先让绝对定位的子盒子left:50%;移动到父级水平中心位置，再通过margin-left:-width; 走子盒子自身宽度的一半。

　　　4.固定定位fixed

• 参照点→可视窗口
• 脱标

　　　　固定定位固定版心右侧位置

　　　　实现：先让固定定位盒子  left:50%;走到浏览器可视区（版心）的一半；再margin-left:-版心宽度的一半

 　　5. 粘性定位

• 参照点→可视窗口　　
• 不脱标
• 必须有top、left、right、bottom其中一个偏移量才会生效

　　定位的特性

　　　　⑴ 行内元素有绝对或固定定位时，可以直接设置宽高

　　　　⑵ 块级元素有绝对或固定定位时，若本身没设置宽高则默认为内容大小

　　　　⑶ 浮动，绝对、固定定位不会触发外边距合并

　　定位叠放次序 z-index:value;

　　　　⑴  值可以是正整数、负整数或0（无单位）

　　　　⑵  值相同，则按书写顺序后来居上

　　　　⑶  定位的盒子才有z-inex属性

---

 

元素的显示于隐藏

　　display隐藏元素后，不再占有原来位置。值：

1. none：隐藏对象
2. block：转为块级，同时也是显示元素的意思

　　visibility隐藏元素后，继续占有原来位置。值：

1. visible：可视
2. hidden：隐藏

　　overflow溢出内容的显示会影响布局。值：

1. visible：显示超出部分
2. hidden：隐藏超出部分；有定位的盒子慎用
3. scroll：不论溢出否，总是显示滚动条
4. auto：内容溢出自动生成滚动条

　　单行文本溢出部分→省略号

white-space: nowrap; /*强制一行显示，溢出部分不换行*/
overflow: hidden; /*溢出部分隐藏*/
text-overflow: ellipsis; /*省略号替代溢出的文本内容*/

---

 

精灵图 sprites

　　用途：针对多个小的背景图

　　优势：减少服务器接收、发送请求的次数，提高页面加载速度

　　使用核心：

　　⑴ 移动背景图片位置→background-position

　　⑵移动的距离是这个目标图片的x和y坐标

　　⑶ 常向左向上移动，所以多是负值

---

 

字体图标 iconfont

　　用途：主要用于显示网页中通用、常用的小图标

　　本质：属于字体，可以像更改字体样式一样更改它

　　优点：轻量级，灵活，兼容性好

　　使用步骤：

1. 在图标网站选取并下载需要的图标
2. 复制fonts文件到根目录
3. 字体声明
4. 打开demo.html复制对应图标的转义或□
5. 重新上传→selection.json，重新选取下载并取代旧文件包

　　经常搭配伪元素::after定位到具体位置

---

 

用户界面样式

　　鼠标样式cursor 值：

• default 默认
• pointer 小手
• move 移动
• text 文本（光标）
• not-allowed 禁止

　　轮廓线outline 值：

• none 或 0：去掉outline

　　文本域防拖拽更改框大小

resize:none;

　　vertical-align属性

　　设置一个元素的垂直对齐方式，只对行内元素和行内块有效。主要用于图片、表单和文字对齐。值：

• baseline 默认，基线对齐
• top 顶端对齐
• middle 中部对齐
• bottom 底线对齐

---

 css三角

　　解释：盒模型的每条边框并非矩形，而是梯形；所以当宽高都为0时，只取任意一角就是个三角形

　　直角三角实现步骤：

1. border-color：除了右，其他为透明
2. border-style：solid
3. border-width：top数值拉大，right大约为top一半，其余0
4. 通过定位将三角定到合适位置

---

 

常见布局技巧

• margin负值：

　　　　解释：有些情况下，盒子左右两边都有边框，就会出现边框1+1=2，此时利用margin: -1px;，多余的1像素边框就正好被遮盖。

　　　　原理：渲染过程中，是先执行完第一个的所有样式再接着执行下一个的样式，所以不会出现大家都是负1外边距而原地不动的情况。

　　　　问题：被遮盖的1px边框，正常状态下没问题，一旦:hover经过，就会发现左边盒子的右边框被右边的盒子遮盖了。

　　　　解决：:hover 经过时，给对应盒子加相对定位；若本身已有定位，则开启z-index属性

 

• 利用浮动元素不会压住文字做布局
• 利用行内块一行布局
• 父级添加text-align: center; 父级里面的行内和行内块会水平居中

---

 

CSS3新特性

新增选择器

　　属性选择器  权重10

• E[att]　　　     　选中具有att属性的E元素
• E[att="val"]　   　选中具有att属性且属性值等于val的E元素
• E[att^="val"]　　 选中具有att属性且以val开头的E元素
• E[att$="val]         选中具有att属性且以val结尾的E元素
• E[att*="val"]        选中具有att属性且值中包含val的E元素

　　结构伪类选择器 权重10

• E:first-child　    　选中父元素中第一个子元素E
• E:last-child　　    选中父元素中最后一个子元素E
• E:nth-child(n)　　选中父元素中第n个子元素E

• E:first-of-type　　指定类型E的第一个
• E:last-of-type　　指定类型E的最后一个
• E:nth-of-type(n)　指定类型E的第n个

　　nth括号里的 n 可以是数字，关键字和公式↓

• 关键字：even偶数，odd奇数
• 公式：
  • 2n偶数
  • 2n+1奇数
  • 5n  5和5的倍数
  • n+5 从5开始（包括5）
  • -n+5 前5（包括5）

　　伪元素选择器

　　::before和::after，权重和标签选择器一样为1。特点：

　　　　⑴ 创建一个行内元素

　　　　⑵ 在文档树中找不到

　　　　⑶ 必须有content属性

　　使用场景：

　　　　⑴ content里放字体图标并定位到需要的位置

　　　　⑵ 添加遮罩层

　　　　⑶ 清楚浮动

 

盒子模型

　　box-sizing属性，值：

1. content-box  默认，盒子大小为width + padding + border
2. border-box  盒子大小为width

 

滤镜

　　语法：filter: 函数( );

　　应用①：blur函数，数值越大越模糊，带像素单位

 

计算函数

　　语法：calc 函数()

　　解释：声明属性值时执行计算

　　例：width:calc(100% - 80px)

---

CSS3过渡

　　transition: 属性 花费时间 运动曲线 何时开始

1. 属性：想要变化的CSS属性；所有属性→all
2. 花费时间：单位时秒；如0.5s
3. 运动曲线：默认是ease（可省略）
4. 何时开始：单位秒，默认0s（可省略）

　　注意：谁做过渡给谁加

---

 2D转换

　　transform 转换属性，值如下

　　1. translate 移动

　　作用：改变元素在页面中的位置

　　优点：移动不会影响其他元素的位置

　　特点：百分比是相对自身的宽高，对行内元素无效

　　tips：定位盒子水平居中可配合translate(-50% -50%)

transform: translate(x,y)；
transform: translateX(n)；/*只移动x轴*/
transform: translateY(n)；/*只移动y轴*/

　　2. rotate 旋转

　　说明：单位为deg；当角度为正数时，顺时针旋转；为负数时，逆时针旋转

transform: rotate(度数);

　　3.scale 缩放

　　优点：不影响其他盒子，可设置中心点

　　说明：参数是倍数，不跟单位；小于1→缩小，如果只跟一个参数则另一个等比例缩放

transform: scale(x,y);

　　转换的综合写法

　　注意：顺序会影响转换效果，先旋转会改变标轴方向；同时有位移和其他属性时，位移应该写在最前面

transform: translate() rotate() scale()...

---

动画

　　使用动画的步骤：

　　　　1. 定义动画，说明：

• • animationName：表示动画的名称；
  • from：定义动画的开头，相当于 0%；
  • percentage：定义动画的各个阶段，为百分比值(整数），可以添加多个；
  • to：定义动画的结尾，相当于 100%；
  • properties：不同的样式属性名称，例如 color、left、width 等等。

@keyframes animationName 

　　from

　　　　properties: value;

　　

　　percentage

　　　　properties: value;

　　

　　to

　　　　properties: value;

　　

 

// 或者

@keyframes animationName

　　0%

　　　　properties: value;

　　

　　percentage

　　　　properties: value;

　　

　　100%

　　　　properties: value;

　　

　　2. 元素使用动画

animation-name: 动画名称;
anmation-duration：持续时间;

动画常用属性	说明
@keyframes	规定动画
animation	简写属性，animation-play-state不在简写范围
animation-name	动画名称
animation-duration	动画一周期所花费的秒或毫秒
animation-timing-function	动画的速度曲线
animation-delay	动画何时开始（动画推迟）
animation-iteration-count	动画播放次数，默认1次；infinite
animation-direction	下一周期是否逆播放，默认normal；alternate逆播放
animation-play-state	动画是否正在运行或暂停，默认running；paused暂停
animation-fill-mode	动画结束后状态，forward保持；backward回到起始

　　动画属性简写：有一定顺序要求，推荐顺序：

　　animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否逆播放 动画起始或结束状态

　　注意：简写里的动画名称和持续时间必写；简写里不包括animation-play-state，需另外写

animation-timing-function的值	说明
linear	匀速
ease	默认。低速开始→加快→结束前变慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）。 有了steps不可再写ease或linear

css学习笔记1

css基本语法
selector {declaration1; declaration2; ... declarationN }
declaration property:value, declaration使用分号分割,最后一条声明后建议添加‘;‘作为结束
如果属性中包含空格,需要给属性值添加双引号""
css本身不区分大小写,但是应用于html时,class和id名称是大小写敏感的

1.分组选择器
h1,h2,h3,h4,h5,h6 {
color: green;
}

2.派生选择器
li strong {
font-style: italic;
font-weight: normal;
}

仅对<li><strong></strong></li>标签内元素生效

3.id选择器
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

只对id为sidebar内的p元素生效

4.类选择器
.center {text-align: center}
类选择器以一个点号显示

.center {text-align: center}
<h1 class="center">
    This heading will be center-aligned
</h1>
<p class="center">
    This paragraph will also be center-aligned.
</p>
class匹配的元素都会生效

和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}

对class="fancy"内元素的 td元素生效

元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
对且仅对class为fancy的td元素生效
<td class="fancy"></td>

5.属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

下面的例子为带有 title 属性的所有元素设置样式：

属性选择器>>
[title]
{
color:red;
}
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

属性和值选择器>>
[title=W3School]
{
border:5px solid blue;
}
<img title="W3School" src="/i/w3school_logo_white.gif" />
<a title="W3School" href="http://w3school.com.cn">W3School</a>

属性和值选择器 - 多个值>>
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</p>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>

设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;

font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

<form name="input" action="" method="get">
    <input type="text" name="Name" value="Bill" size="20">
    <input type="text" name="Name" value="Gates" size="20">
    <input type="button" value="Example Button">
</form>

在html内应用css，和多重样式定义
http://www.w3school.com.cn/css/css_howto.asp