首页 前端知识 css学习记录

css学习记录

2024-06-02 09:06:53 前端知识 前端哥 63 663 我要收藏

CSS

指层叠样式表,用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,css文件扩展名为.css。样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

语法

Css规则由选择器及一条或多条声明两个部分构成:

选择器通常是需要改变的HTML元素。

每条声明由一个属性和一个值构成,声明总以;结束,用{}括起来,属性是设置的样式属性,每个属性都有一个值,属性和值被冒号分隔开。

注释:以/*开始,*/结束,用于解释代码,可随意编辑,浏览器会自动忽略

id选择器

可以为有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。(id属性不要以数字开头)

class选择器

用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

代码中用到多个可用空格分开。(类名第一个字符不能使用数字)

样式表

插入样式表的方法:外部样式表,内部样式表,内联样式表

外部样式表:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部,外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

属性: rel="stylesheet":外部样式表    type="text/css":引用文档的类型

内部样式表:当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

属性:type="text/css":引用文档的类型

内联样式表:由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。例如当样式仅需要在一个元素上应用一次时。要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何 CSS 属性。

多重样式:如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。 优先级:内联样式>内部样式>外部样式> 浏览器默认样式

注:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式

属性

背景

background简写属性,作用是将背景属性设置在一个声明中。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-color设置元素的背景颜色。

background-image把图像设置为背景。

background-position设置背景图像的起始位置。

background-repeat设置背景图像是否及如何重复。

背景颜色:background-color,页面的背景颜色使用在body的选择器中,css中,颜色值通常以十六进制,RGB,颜色名称定义

背景图像:background-image,默认情况下,背景图像会在页面的水平或者垂直方向平铺进行平铺重复显示,以覆盖整个元素实体。不想让图像平铺,可以使用 background-repeat 属性。可以利用 background-position 属性改变图像在背景中的位置

可将所有属性全部简化为background,例如body {background:#ffffff url('img_tree.png') no-repeat right top;},简写属性顺序:background-color,background-image,background-repeat,background-attachment,background-position

文本

color设置文本颜色

direction设置文本方向。

letter-spacing设置字符间距

line-height设置行高

text-align对齐元素中的文本

text-decoration向文本添加修饰

text-indent缩进元素中文本的首行

text-shadow设置文本阴影

text-transform控制元素中的字母

unicode-bidi设置或返回文本是否被重写

vertical-align设置元素的垂直对齐

white-space 设置元素中空白的处理方式

word-spacing设置字间距

文本颜色:css中,颜色值通常以十六进制,RGB,颜色名称定义

文本对齐方式:文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐。

文本修饰:text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

文本转换:用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。例如p.uppercase {text-transform:uppercase;}全为大写

p.lowercase {text-transform:lowercase;}全为小写p.capitalize {text-transform:capitalize;}首字母大写

文本缩进:指定文本第一行的缩进,p {text-indent:50px;}

字体

font在一个声明中设置所有的字体属性

font-family指定文本的字体系列

font-size指定文本的字体大小

font-style指定文本的字体样式

font-variant以小型大写字体或者正常字体显示文本。

font-weight指定字体的粗细。

字体字型:分为两种,通用字体系列——拥有相似外观的字体系统组合,特定字体系列——一个特定的字体系列。

字体系列:font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。多个字体系列是用一个逗号分隔指明的。

字体样式:主要是用于指定斜体文字的字体样式属性。这个属性有三个值:正常——正常显示文本p.normal {font-style:normal;},斜体——以斜体字显示的文字p.italic {font-style:italic;},倾斜的文字——文字向一边倾斜(和斜体非常类似,但不太支持)p.oblique {font-style:oblique;}

字体大小:font-size 属性设置文本的大小,字体大小的值可以是绝对或相对的大小

绝对大小:设置一个指定大小的文本,不允许用户在所有浏览器中改变文本大小,确定了输出的物理尺寸时绝对大小很有用

相对大小:相对于周围的元素来设置大小,允许用户在浏览器中改变文字大小

如果不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)

可以用像素例如h1 {font-size:40px;}或em例如h1 {font-size:2.5em;}设置大小,还可以使用百分比和em组合,例如body {font-size:100%;}  h1 {font-size:2.5em;}

链接

链接样式:链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

特别的链接,可以有不同的样式,这取决于状态,这四个链接状态分别是

a:link——正常,未访问过的链接,a:visited——用户已访问过的链接,a:hover——当用户鼠标放在链接上时,a:active——链接被点击的那一刻

a:hover 必须在 a:link 和 a:visited 之后,a:active 必须在 a:hover 之后,需要严格按顺序才能看到效果。

列表

list-style简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image将图像设置为列表项标志。

list-style-position设置列表中列表项标志的位置。

list-style-type设置列表项标志的类型。

作用:设置不同的列表项标记为有序列表,设置不同的列表项标记为无序列表,设置列表项标记为图像

在 HTML中,有两种类型的列表:无序列表 ul——列表项标记用特殊图形(如小黑点、小方框等),有序列表 ol——列表项的标记有数字或字母,使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。

list-style-type属性指定列表项标记的类型

简写属性顺序:list-style-type,list-style-position (有关说明,请参见下面的CSS属性表),list-style-image如果上述值丢失一个,其余仍在指定的顺序,就没关系。

list-style-type:none 属性可以用于移除小标记。例如默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距,可使用 margin:0 和 padding:0 来移除。

表格

指定css边框,使用border属性

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

Width和height属性定义表格的宽度和高度,text-align属性设置水平对齐方式,向左,右,或中心

如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性

盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距)——清除边框外的区域,是完全透明的,margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性,在CSS中,它可以指定不同的侧面不同的边距,有1-4个值    

Border(边框)——围绕在内边距和内容外的边框。

Padding(内边距)——length定义一个固定的填充(像素, pt, em,等),%使用百分比值定义一个填充。清除内容周围的区域,是透明的,单独使用 padding 属性可以改变上下左右的填充,与margin一样,有四个值

Content(内容)——盒子的内容,显示文本和图像。

指定元素宽度和高度时,完整大小的元素不仅要有内容区域的宽高,还要添加内边距、边框、外边距

元素的总宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

border简写属性,用于把针对四个边的属性设置在一个声明。

border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color简写属性,设置元素的所有边框中可见部分的颜色,为 4 个边分别设置颜色。

border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color设置元素的下边框的颜色。

border-bottom-style设置元素的下边框的样式。

border-bottom-width设置元素的下边框的宽度。

border-left简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color设置元素的左边框的颜色。

border-left-style设置元素的左边框的样式。

border-left-width设置元素的左边框的宽度。

border-right简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color设置元素的右边框的颜色。

border-right-style设置元素的右边框的样式。

border-right-width设置元素的右边框的宽度。

border-top简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color设置元素的上边框的颜色。

border-top-style设置元素的上边框的样式。

border-top-width设置元素的上边框的宽度。

border-radius设置圆角的边框。

CSS边框属性允许你指定一个元素边框的样式和颜色

样式由border-style属性用来定义

border-style值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

hidden:隐藏边框

mix:混合边框,例如p.mix {border-style: dotted dashed solid double;}

宽度由border-width 属性指定,有两种方式可以指定长度值,比如2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin(CSS 没有定义 3 个关键字的具体宽度,所以用户可以随意设置)

颜色由border-color属性设置,name——指定颜色的名称,如 "red",RGB——指定 RGB 值, 如 "rgb(255,0,0)",Hex——指定16进制值, 如 "#ff0000"(border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式,例如

单独设置各边,border-style属性可以有1-4个值:

border-style:dotted solid double dashed; 上边框是 dotted,右边框是 solid,底边框是 double,左边框是 dashed

border-style:dotted solid double; 上边框是 dotted,左、右边框是 solid,底边框是 double

border-style:dotted solid; 上、底边框是 dotted,右、左边框是 solid

border-style:dotted;四面边框是 dotted

轮廓

outline在一个声明中设置所有的轮廓属性

outline-color设置轮廓的颜色

outline-style设置轮廓的样式   

outline-width设置轮廓的宽度

绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,outline 属性规定元素轮廓的样式、颜色和宽度

分组和嵌套选择器

分组选择器:为了减少代码,每个选择器用逗号分隔,例如可变成

嵌套选择器:适用于选择器内部的选择器的样式,例如p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class="marked" 的元素指定一个样式。.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

尺寸

height设置元素的高度。

line-height设置行高。

max-height设置元素的最大高度。

max-width设置元素的最大宽度。

min-height设置元素的最小高度。

min-width设置元素的最小宽度。

width设置元素的宽度。

显示与可见性

隐藏元素可以把display属性设置为"none",或把visibility属性设置为"hidden"。但这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。

内联元素:{display:inline;},块元素:{display:block;}

定位

bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。

clip剪辑一个绝对定位的元素   

cursor显示光标移动到指定的类型  

left定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow设置当元素的内容溢出其区域时发生的事情。

overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域

overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域

position指定元素的定位类型

right定义了定位元素右外边距边界与其包含块右边界之间的偏移。

top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

z-index设置元素的堆叠顺序

static 定位:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠

relative 定位:相对定位元素的定位是相对其正常位置。原本所占的空间不会改变

absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html> 。absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。

sticky 定位:position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

重叠的元素:元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面),一个元素可以有正数或负数的堆叠顺序

布局

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条,只工作于指定高度的块元素上

浮动

clear指定不允许元素周围有浮动元素。

float指定一个盒子(元素)是否可以浮动。

会使元素向左或向右移动,其周围的元素也会重新排列。往往用于图像,但它在布局时一样非常有用

清除浮动——使用 clear,元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

组合选择符

后代选择器(以空格分隔),用于选取某元素的后代元素

子元素选择器(以>号分隔),子元素选择器只能选择作为某元素直接/一级子元素的元素。

相邻兄弟选择器(以+分隔),可选择紧接在另一元素后的元素,且二者有相同父元素。

普通(后继)兄弟选择器(以波~分隔)选取所有指定元素之后的相邻兄弟元素

伪类

伪类的语法:selector:pseudo-class {property:value;},CSS类也可以使用伪类:selector.class:pseudo-class {property:value;}

伪元素

伪元素的语法:selector:pseudo-element {property:value;}CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;}

计数器

content使用 ::before 和 ::after 伪元素来插入自动生成的内容

counter-increment递增一个或多个值

counter-reset创建或重置一个或多个计数器

使用到以下几个属性:counter-reset——创建或者重置计数器,counter-increment——递增变量,content——插入生成的内容,counter() 或 counters() 函数——将计数器的值添加到元素,要使用 CSS 计数器,得先用 counter-reset 创建

!important规则

用于增加样式的权重。!important 与优先级无关,但它与最终的结果直接相关,使用一个 !important 规则时,此声明将覆盖任何其他声明。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10508.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!