CSS学习笔记

最新推荐文章于 2024-04-24 23:50:15 发布

幸愉聊信奥

最新推荐文章于 2024-04-24 23:50:15 发布

阅读量452

点赞数

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/Edviv/article/details/122536011

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

CSS 简介
- CSS引入方式
CSS 选择器
- 元素的 id 和 class
- 选择器
字体样式
- 字体类型 font-family
- 字体大小 font-size
- 字体粗细 font-weight
- 字体风格 font-style
- 字体颜色 color
- CSS 注释
文本样式
- 首行缩进 text-indent
- 水平对齐 text-align
- 文本修饰 text-decoration
- 大小写 text-transform
- 行高 line-height
- 字间距 letter-spacing
- 词间距
边框样式
- 边框宽度 border-width
- 边框外观 border-style
- 边框颜色 border-color
- 局部样式
列表样式
- 列表项符号 list-style-style
- 列表项图片 list-style-image
表格样式
- 表格标题位置 caption-side
- 表格边框合并 border-collapse
- 表格边框间距 border-spacing
图片样式
- 图片边框
- 图片对齐
- 文字环绕 float
背景样式
- 背景颜色 background-color
- 背景图片样式 background-image
- 背景图片重复 background-repeat
- 背景图片位置 background-position
- 背景图片固定 background-attachment
超链接样式
- 鼠标样式
- 自定义鼠标样式
盒子模型
- 宽高 width与height
- 边框 border
- 内边距 padding
- 外边距
- 浏览器审查元素
浮动布局
- 正常文档流
- 脱离文档流
- 浮动
定位布局
- 固定定位 fixed
- 相对定位：relative
- 绝对定位 absolute
- 静态定位 static

CSS 简介

HTML 控制网页的结构，CSS 控制网页的外观，JavaScript 控制网页的行为

CSS引入方式

外部样式表

外部样式表： 把 CSS 代码和 HTML 代码单独放在不同文件中，然后在 HTML 文档中使用 link 标签来引用 CSS 样式表
外部样式表在单独文件中定义，然后在 HTML 文件的 <head></head> 标签对中使用 link 标签来引用

<link rel="stylesheet" type="text/css" href="文件路径" />

rel: relative 缩写，取值是固定的，即 stylesheet 引入一个样式表文件，即 CSS 文件
type 取值固定即 “text/css”，表示这是标准的 CSS
href 属性表示 CSS 文件的路径

内部样式表

内部样式表： 把 HTML 代码和 CSS 代码放到同一个 HTML 文件中，CSS 代码放在 style 标签内，并且 style 标签是放在 head 标签内部

<style type = "text/css"></style>

type = “text/css” 是必须添加的，表示标准的 CSS

行内样式表

行内样式表： 把 HTML 代码和 CSS 代码放到同一个 HTML 文件中，行内样式表的 CSS 是在 style 属性中定义的。
@import 方式在实际开发中不常用，因为 @import 方式会先加载 HTML 后加载 CSS，如果 HTML 在 CSS 之前加载，页面用户体验就会非常差

CSS 选择器

元素的 id 和 class

id: 具有唯一性，同一个页面相同的 id 只能出现一次，如果出现多个相同的 id，那么 CSS 和 JavaScript 就无法识别这个 id 对应的是哪一个元素
class: 同一个页面的相同元素或者不同元素设置相同的 class，相同的 class 具有相同的 CSS 样式

选择器

选择器： 用一种方式选中你想要的元素，选择器的不同在于选择方式的不同

元素选择器

元素选择器：选中相同的元素，然后给相同的元素定义同一个 CSS 样式

<style>
选择符{ 属性: 属性值;} /*选择符就是元素符号*/
</style>

id 选择器

在同一个页面，不允许有两个相同的 id

<style type="text/css">
    #id名称{ 属性:属性值;} /* id选择器 id名前必须加上前缀# */
</style>

class 选择器

类选择器：对相同元素或者不同元素定义相同的 class 属性，然后相同的 class 的元素拥有相同的 CSS 属性

<style type="text/css">
    .类名称{ 属性: 属性值; } /* 必须加前缀 . 表明这是一个 class 选择器*/
</style>

后代选择器

后代选择器：选择元素内部中所有的某一种元素，包括子元素和其他后代元素

<style type="text/css">
选择器1  选择器2 { 属性:属性值; } /*选择器1 父选择器  选择器2  后代选择器*/
</style>

父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素

群组选择器

群组选择器：同时对几个选择器进行相同的操作

<style>
选择器1, 选择器2{ 属性: 属性值; } /* 群组选择器,两个选择器之间用一个 , 隔开*/
</style>

字体样式

字体类型 font-family

语法格式

font-family: 字体1, 字体2, ... , 字体 N;

font-family: 可以指定多种字体，使用多种字体时，从左到右的顺序排列，并且以英文 , 隔开，如果不定义 font-family 浏览器默认字体类型一般是宋体
在实际开发中，比较美观的中文字体有微软雅黑、宋体；英文字体有 $T i m e s N e w R o m a n$ 、 $A r i a l$ 、 $V e r d a n a$

字体大小 font-size

font-size 属性定义字体大小，属性取值关键字 small、medium、large 等，还可以取像素值 px

font size: 像素值;

字体粗细 font-weight

font-weight: 取值;

属性值	说明
$n o r m a l$	正常(默认值)
$l i g h t e r$	较细
$b o l d$	$较粗$
$b o l d e r$	很粗(效果跟 $b o l d$ 差不多)

实际开发中，一般用 bold 这个属性值，其余用的很少

字体风格 font-style

font-style: 取值;

属性值	说明
$n o r m a l$	正常( 默认值 )
$i t a l i c$	斜体
$o b l i q u e$	斜体

字体颜色 color

color: 颜色值;

颜色值可以选择关键字，例如 red、blue、green 等，也可以选择 16 进制 RGB 值

CSS 注释

/* 注释内容 */

文本样式

文本样式：注重整体效果

首行缩进 text-indent

如果用四个 &nbsp 实现两个空格缩进，但是在实际开发中冗余代码很多，因此设置 text-indent 为 font-size 值的两倍实现空格缩进

水平对齐 text-align

text-align: 取值;

属性值	说明
$l e f t$	左对齐( 默认值 )
$c e n t e r$	居中对齐
$r i g h t$	右对齐

文本修饰 text-decoration

text-decoration: 取值;

属性值	说明
$n o n e$	去除所有的划线效果( 默认值 )
$u n d e r l i n e$	下划线
$l i n e - t h r o u g h$	中划线
$o v e r l i n e$	顶划线

下划线： 一般强调文章的重点
中划线：一般用于促销
顶划线：实际开发用的很少

大小写 text-transform

text-transform:取值;

属性值	说明
$n o n e$	无转换( 默认值 )
$u p p e r c a s e$	转换为大写
$l o w e r c a s e$	转换为小写
$c a p i t a l i z e$	只将每个英文单词首字母转换为大写

行高 line-height

行高：一行的高度

line-height: 像素值;

字间距 letter-spacing

letter-spacing: 像素值;

词间距

word-spacing: 像素值;

边框样式

边框宽度 border-width

border-width: 像素值;

边框外观 border-style

属性值	说明
$n o n e$	无样式
$d a s h e d$	虚线
$s o l i d$	实线

边框颜色 border-color

border-color: 关键字(16进制RGB值)

border: 1px solid red;
/* 等价于 */
border-width: 1px;
border-style: solid;
border-color: red;

局部样式

上边框

 border-top: 1px solid red;

下边框

border-bottom:1px solid red;

左边框

border-left:1px solid red;

右边框

border-right:1px solid red;

去掉上边框

border-top:0px;  border-top:0; border-top:none; /*三个是等价的*/

列表样式

列表项符号 list-style-style

list-style-type: 取值;

有序列表取值

属性值	说明
$d e c i m a l$	阿拉伯数字: 1、2、3 … ( 默认值 )
$l o w e r - r o m a n$	小写罗马数字: i、ii …
$u p p e r - r o m a n$	大写罗马数字: I、II …
$l o w e r - a l p h a$	小写英文字母: a、b、c …
$u p p e r - a l p h a$	大写英文字母: A、B、C …

无序列表取值

属性值	说明
$d i s c$	实心圆( 默认值 )
$c i r c l e$	空心圆
$s q u a r e$	正方形

去除有序列表或无序列表的列表项符号

list-style-type: none;

列表项图片 list-style-image

list-style-image:url(图片路径);

使用图片来代替列表项符号

表格样式

在 table 元素中定义

表格标题位置 caption-side

caption-side 属性定义表格标题的位置

caption-side:取值;

属性值	说明
$t o p$	标题在顶部(默认值)
$b o t t o m$	标题在底部

表格边框合并 border-collapse

border-collapse:取值;

属性值	说明
$s e p a r a t e$	边框分开，有空隙 ( 默认值 )
$c o l l a p s e$	边框合并，无空隙

表格边框间距 border-spacing

border-spacing: 像素值;

图片样式

width:像素值;
height:像素值;

图片边框

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

图片对齐

text-align ：图片水平对齐和文本水平对齐

text-align:取值;

属性值	说明
$l e f t$	$左对齐 (默认值)$
$c e n t e r$	居中对齐
$r i g h t$	右对齐

vertical-align：垂直对齐方式

vertical-align:取值;

属性值	说明值
$t o p$	顶部对齐
$m i d d l e$	中部对齐
$b a s e l i n e$	基线对齐
$b o t t o m$	底部对齐

文字环绕 float

float：实现图文混排的效果，文字环绕着图片进行布局

float:取值;

属性值	说明
$l e f t$	元素向左浮动
$r i g h t$	元素向右浮动

背景样式

背景颜色 background-color

background-color: 颜色值;

color 属性定义文本颜色；background-image 属性来为元素定义背景图片

背景图片样式 background-image

background-image: url(图片路径);

背景图片重复 background-repeat

background-repeat:取值;

属性值	说明
$r e p e a t$	在水平方向和垂直方向上同时平铺 ( 默认值 )
$r e p e a t - x$	只在水平方向 ( x轴 ) 上平铺
$r e p e a t - y$	只在垂直方向 ( y轴 ) 上平铺
$n o - r e p e a t$	不平铺

背景图片位置 background-position

background-position:像素值/关键字;

像素值的情况

background-position:水平距离 垂直距离;

水平距离，垂直距离这两个数值之间要用空格隔开，两者取值都是像素值
关键字

属性值	说明
$t o p$ $l e f t$	左上
$t o p$ $c e n t e r$	靠上居中
$t o p$ $r i g h t$	右上
$l e f t$ $c e n t e r$	靠左居中
$c e n t e r$ $c e n t e r$	正中
$r i g h t$ $c e n t e r$	靠左居中
$b o t t o m$ $l e f t$	左下
$b o t t o m$ $c e n t e r$	靠下居中
$b o t t o m$ $r i g h t$	右下

背景图片固定 background-attachment

background-attachment:取值;

属性	说明
$s c r o l l$	随元素一起滚动 ( 默认值 )
$f i x e d$	固定不动

超链接样式

默认情况下：字体为蓝色，带有下划线
鼠标点击时：字体为红色，带有下划线
鼠标点击后：字体为紫色，带有下划线
超链接伪类

伪类	说明
$a : l i n k$	定义 $a$ 元素未访问时的样式
$a : v i s i t e d$	定义 $a$ 元素访问后的样式
$a : h o v e r$	定义鼠标经过 $a$ 元素时的样式
$a : a c t i v e$	定义鼠标点击激活时的样式

超链接伪类，用到两种状态：未访问时状态 a{ } 和鼠标经过状态a:hover{ }

元素: hover{ }

:hover 伪类可以定义任何一个元素在鼠标经过时的样式

鼠标样式

cursor: 取值;

在这里插入图片描述

自定义鼠标样式

cursor:url(图片地址), 属性值;

图片地址即鼠标图片地址，其后缀名一般是 .cur，属性值一般是 default、pointer、text 这三种

盒子模型

在这里插入图片描述
CSS 盒子模型理论中，页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间

属性	说明
$c o n t e n t$	内容，可以是文本或图片
$p a d d i n g$	内边距，用于定义内容与边框之间的距离
$m a r g i n$	外边距，用于定义当前元素与其他元素之间的距离
$b o r d e r$	边框，用于定义元素的边框

宽高 width与height

只有块元素才可以设置 width、height

width:像素值;
height:像素值;

边框 border

border:1px solid red;
/* border-width  border-style  border-color*/

内边距 padding

内边距：指的是内容区和边框之间的空间

padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;

padding 简写

padding:20px;    /*表示四个方向的内边距是 20px*/
padding:像素值1 像素值2;    
/*表示padding-top 和 padding-bottom为20px; 
padding-right 和 padding-left为40px*/
padding:20px 40px 60px 80px;
/*padding-top:20px;  padding-right:40px;
padding-bottom:60px; padding-left:80px;
*/

外边距

外边距：指的是边框到 “父元素” 或 “兄弟元素” 之间的那一部分；外边距是在元素边框的外部

margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;

当只有父元素时，该元素设置的 margin 就是相对于父元素之间的距离
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的 margin 就是相对于兄弟元素而言。该方向没有兄弟元素，则这个方向的 margin 就是相对于父元素而言

margin:20px; /*表示四个方向的外边距都是 20px*/
margin:20px 40px;
/* 
margin-top 和 margin-bottom 为 20px;
margin-right 和 margin-left 为 40px;
*/
margin:20px 40px 60px 80px;
/*
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
*/

浏览器审查元素

以 Chrome 浏览器为例
①将鼠标移到你想要的元素上面，然后按一下右键，从菜单中选择检查
②在弹出的控制台中，可以找到该元素的盒子模型

浮动布局

正常文档流

正常文档流即普通文档流或普通流；将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满；即默认情况下页面的布局情况

脱离文档流

脱离文档流：脱离正常的文档流，设置浮动或定位即可

浮动

浮动主要考虑用来实现两列或者多列并排效果

float:取值;

属性值	说明
$l e f t$	元素向左浮动
$r i g h t$	元素向右浮动

清除浮动

clear:取值;

属性值	说明
$l e f t$	清除左浮动
$r i g h t$	清除右浮动
$b o t h$	同时清除左浮动和右浮动

定位布局

定位布局的出现，使得精准定位页面中的任意元素成为可能，页面布局操作更加随心所欲

固定定位 fixed

position:fixed; /* 使元素成固定，使用 top; bottom; left; right 设置相对于浏览器的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

相对定位：relative

相对定位指元素的位置是相对于它的原始位置计算而来的

position:relative; /* 使元素成相对定位，使用 top; bottom; left; right 设置相对于原始的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

绝对定位 absolute

绝对定位精确地把元素定位到任意你想要的位置

position:absolute;/*使元素成绝对定位，使用 top; bottom; left; right 设置相对于浏览器的位置*/
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言

静态定位 static

默认情况下，元素没有指定 position 属性时，这个元素就是静态定位