CSS基础知识整理
时间:2023-07-19 23:27:01 | 来源:网站运营
时间:2023-07-19 23:27:01 来源:网站运营
CSS基础知识整理:
1 什么是CSS?
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
2 CSS语法
CSS基础语法
CSS规则由两个主要部分构成:选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性,每个属性有一个值,属性和值被冒号分开。
比如 selector{property:value}
选择器通常是需要改变样式的HTML元素。
比如 h1{color:red; font-size:14px;} h1是选择器,color和font-size是属性,red和14px是值。
注意:
如果定义不止一个声明则需要用分号将每个声明分开。例如:p{text-align:center;color:red}
如果值为若干单词,则要给值加引号: 例如:p {font-family: "sans serif";}
CSS高级语法
选择器的分组
h1,h2,h3,h4,h5,h6 { color: green; }
继承及其问题:根据 CSS,子元素从父元素继承属性。
body { font-family: Verdana, sans-serif;}
3 创建CSS
CSS 创建样式表分为三种情况:
内部样式表<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} </style></head>
行内式(内联样式)<div style="width:200px;height:100px;border:1px solid black;"></div>
外部样式表(外链式) <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
样式优先级:内联样式>内部样式>外部样式三种样式表区别:
行内样式表 :优点 书写方便;缺点 没有实现样式和结构相分离;使用情况 较少;控制范围 控制一个标签(少)。
内部样式表:优点 部分结构和样式相分离; 缺点 没有彻底分;使用情况 较多;控制范围 控制一个页面(中)。
外部样式表:优点 完全实现结构和样式相分离; 缺点 需要引入;使用情况 最多,推荐;控制范围 控制整个站点(多)。
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; }
ID 选择器和类(class)选择器的区别:相同点:
不同点:
- ID 选择器只能在文档中使用一次,而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。
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)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。
文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐);属性默认值为auto。
文本修饰:text-decoration 属性用来设置或删除文本的修饰。
主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰;
text-decoration:overline,设置文本上划线。
text-decoration:line-through; 设置文本中间划线。
text-decoration:underline; 设置文本下划线。
文本阴影:text-shadow: x y shadow color;
其中 x 是水平阴影的偏移值,
y 是垂直阴影的偏移值,
shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。
color 指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。
文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。
CSS表示为:text-indent:2em,em 是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。
文本间距:行高,也就是文本行的高度。例如:line-height:22px;
字间距:letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白,即字间距。
不同的是:
letter-spacing 属性设置字符间距,而 word-spacing 属性设置单词间距。
注意:word-spacing 属性对中文无效,因此在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align:justify 是两个冲突的属性,不能同时使用;
text-align:justify 是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,
而 letter-spacing 是指定一个固定的字间距。
文本空白处理:white-space 属性指定元素内的空白如何处理,默认值为 normal 空白会被浏览器忽略。
该属性还有4个值:
nowrap 文本不会换行,禁止换行,文本会在同一行上继续,直到遇到 <br> 标签为止。
pre 空白会被浏览器保留,这种方式类似 HTML 中的 <pre> 标签,用于定义预格式文本。
pre-wrap 指定保留空白符序列,但是正常地进行换行。
pre-line 指定合并空白符序列,但是保留换行符,并允许自动换行。
文本转换:text-transform 属性控制文本中的字母。
是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。
text-transform:capitalize, 定义文本中的每个单词以大写字母开头。
text-transform:uppercase,定义文本仅有大写字母。
text-transform:lowercase,定义文本仅有小写字母。
8 CSS字体 (font)
font 属性可用于设置文本字体,定义样式,如加粗,大小等,属于复合属性,也叫做简写属性。
简写顺序:
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意,font-size 和 font-family 的值是必需的,否则无效。
(1)是绝对或相对大小,可以使用px、em、%和em组合来设置。
- 使用px设置:通过像素设置文本大小是设置的整个页面。
- 使用em设置:1em等于当前的字体尺寸,比如设置的默认字体是12px,因此1em的默认大小就是12px。像素转换em:px/12 = em
- 使用%和em组合设置:在所有浏览器的解决方案中,设置 <body> 元素的默认字体大小是 100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
<head> <style> body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */ </style></head><body> <p>使用%和em组合设置</p></body>
(2)font-style 属性主要用于指定斜体文字。
属性有三个值:
- normal正常显示文本
- italic 定义斜体
- oblique 定义倾斜的文字
9 CSS链接
链接的四种状态是:
a:link - 正常,未访问过的链接。a:visited - 已访问过的链接。a:hover - 当鼠标滑动到链接上时。a:active - 链接被点击的那一刻。
10 CSS列表
作用:1 设置不同的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type,使用图像作为标记可以利用 list-style-image 属性完成。
- 无序列表:
无序列表经常用来做导航栏菜单,通常都需要隐藏无序列表项的标记,那么就使用 list-style-type:none,表示无标记。 - list-style-type 属性的默认值为 disc 实心圆,即小黑点。除了无标记还可以修改标记,例如circle空心圆,square实心方块。
- 有序列表:
有序列表项标记默认使用数字样式显示,即 list-style-type:decimal。
- 图像作为列表项标记
要指定列表项标记的图像,可以使用 list-style-image 属性,只需要简单地设置一个 url() 值,就可以将图像作为标记类型。
列表属性简写:list-style:list-style-type,list-style-position,list-style-image;
11 CSS表格
表格边框: border
表格宽度和高度:width 和 height
表格对齐:text-align 和 vertical-align
表格内边距:tr,td的padding设置
<head> <style> #tab{ width:50%; font-family:"微软雅黑"; /*设置是否将表格边框合并为单一线条的边框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格边框*/ border:1px solid #7AC942; /*表格内边距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左对齐*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*边颜色*/ color:#000; /*背景颜色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; } </style></head><body><table id="tab"> <caption>食物类别</caption> <thead> <tr class="list"> <th>粗粮</th> <th>蔬菜</th> <th>水果</th> </tr> </thead> <tbody> <tr> <td>大豆</td> <td>黄瓜</td> <td>香蕉</td> </tr> <tr class="list"> <td>高粱</td> <td>菠菜</td> <td>柠檬</td> </tr> <tr class="list"> <td>燕麦片</td> <td>白菜</td> <td>西瓜</td> </tr> </tbody></table></body>
12 CSS 选择器
1 分组和嵌套选择器例如:h1{color:gray;} p{color:gray;}可以写成:h1, p{color:gray;}
.div1 p{ color:white;}.div1 p a{ color:yellow; font-weight:bold;}<div class="div1"> <p>嵌套选择器 <a href="#">深层嵌套选择器</a> </p></div>
*{ padding:0; margin:0;}
2 属性选择器- 属性选择器:属性选择器使用[attr] ;例如:把所有带有 title 属性的元素的字体设置为红色
<head> <style> [title]{ color:red; } </style></head><body> <h1>h1 标题不带有 title 属性</h1> <h2 title="标题">h2 可以设置样式</h2> <a href="#" title="链接">超链接可以设置样式</a></body>
- 属性和值选择器:属性选择器使用[attr=value]
<head> <style> [title=Hello]{ color:blue; } </style></head><body> <h1 title="Hello world">h1 标题 title="Hello world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <a href="#" title="Hello">超链接可以设置样式</a></body>
- 属性和多个值的选择器:使用有两种情况:属性值用空格分隔使用:[attr~=value];属性值用连字符分隔则使用:[attr|=value]
例如:把包含 title='Hello' 的元素的字体设置为绿色,使用 ~ 分隔属性和值
<head> <style> [title~=Hello]{ color:green; } [lang|=zh]{ color:gray; } </style></head><body> <h1 title="world">h1 标题 title="world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <h3 title="Hello Web">h3 可以设置样式</h2> <a href="#" title="Hello world">超链接可以设置样式</a> <a href="#" lang="zh-TW">超链接可以设置样式</a></body>
- 表单样式:属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。例如:
<head> <style> input[type="text"]{ width:150px; display:block; margin-bottom:5px; background-color:yellow; } input[type="button"]{ width:120px; margin-top:5px; background-color:green; } </style></head><body> <form name="input" action="demo.php" method="get"> 用户名:<input type="text" name="user" placeholder="请输入登录名"> 昵 称:<input type="text" name="name" placeholder="请输入角色名"> <input type="button" value="查询"> </form></body>
3 组合选择器:组合选择符是包括各种简单选择器的组合方式,组合选择符说明了两个选择器直接的关系。
- 后代选则器:又称为包含选择器,以空格分隔,子元素选择器只能选择作为某元素子元素的元素。
- 子元素选择器:子元素选择器只能选择作为某元素子元素的元素,以 > 分隔,子元素选择器只能选择作为某元素子元素的元素。
- 相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素,以 + 分隔。
- 普通相邻兄弟选择器:选取所有指定元素的相邻兄弟元素,以 ~ 分隔。
- 选择器组合:多种选择器可以结合起来使用。
13 CSS伪类(不区分大小写)
CSS 伪类是用来向一些选择器添加特殊的效果。
语法:选择器:伪类{attr:value;}
CSS 类也可以使用伪类:选择器.class:伪类{attr:value;}
(1)超链接伪类
在浏览器中,链接的不同状态都可以以不同的方式显示:
a:link{color:#FF0000;} /* 未访问的链接显示为红色 */a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */
注意: 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后,才是有效的。
(2)伪类和 CSS 类(伪类可以与 CSS 类配合使用)
(3)CSS2 - :first - child 伪类
<body> <p>第一个 p 元素</p> <p>第二个 p 元素</p> <p>第三个 p 元素</p></body>
选择作为任何元素的第一个子元素 p。选择器使用 p:first-child。
选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child。
选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b。
(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 属性与 :before 及 :after 伪元素配合使用,来插入生成内容,该属性用于定义元素之前或之后放置的生成内容。
content 的内容一般可以为四种:
- content:none 该值是默认值,不插入内容。
- content:"string" 插入文本。
- content:attr(属性) 插入标签属性值。
- content:url(路径) 使用指定的绝对或相对地址插入一个外部资源,可以是图像,音频,视频或浏览器支持的其他任何资源。
15 块级元素和行内元素
块级元素(block-level):每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
块级元素特点:
- 总是从新行开始
- 高度,行高,外边距以及内边距都是可以控制的
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素(inline-level):不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置高度,宽度,对齐等属性,常用于控制页面中文本的样式。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。
行内元素的特点:- 和相邻行内元素在一行上。
- 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或则其他行内元素。(a特殊)
注意:
1.只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
2. 链接里面不能再放链接。
16 行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度。
- 高度,行高、外边距以及内边距都可以控制。
17 CSS 三大特性
层叠、继承、优先级CSS层叠性:是指多种CSS样式的叠加。
CSS继承性:是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。简单理解就是: 子承父业。
CSS优先级:定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
使用了 !important声明的规则。
考虑权重时,需要注意的一些点:
- 继承样式的权重为0。
- 行内样式优先。
- 权重相同时,CSS遵循就近原则。
18 盒子模型(CSS重点)
CSS三大模块: 盒子模型 、浮动 、定位。盒子模型:就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
盒子边框(border)
语法:border : border-width || border-style || border-color 常用属性值:none:没有边框即忽略所有边框的宽度(默认值)、solid线(单实线)、dashed(虚线)、dotted(点线)、double(双实线)
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:固定定位,相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系,只认浏览器;完全脱标,不占有位置,不随着滚动条滚动。
叠放次序(z-index的特点:
- z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
- 如果取值相同,则根据书写顺序,后来居上。
- 后面数字一定不能加单位。
- 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性