CSS菜鸟笔记

2023-04-02 12:53| 来源: 网络整理| 查看: 265

最近想学习学习前端相关，先从基础吧；本文主要是在菜鸟笔记上的html教程中的笔记或者总结，主要给自己查询；参考链接：http://www.runoob.com/

CSS简介CSS 指层叠样式表 (Cascading Style Sheets)；样式定义如何显示 HTML 元素，通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一

HTML 标签原本被设计为用于定义文档内容，样式表定义如何显示 HTML 元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

p {color:red;text-align:center;} P:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: CSS可读性更强 p { color:red; text-align:center; }

CSS注释以 “/” 开始, 以 “/” 结束

Id 和 Classid 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 “#” 来定义。 ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

#para1 { text-align:center; color:red; }

Hello World!

这个段落不受该样式的影响。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：

.center { text-align:center; } 标题居中

段落居中。

你也可以指定特定的HTML元素使用class。 p.center { text-align:center; } 这个标题不受影响

这个段落居中对齐。

除了提到的 id 和 class 选择器外第三种选择器为标签选择器，即以 html 标签作为 css 修饰所用的选择器。第四种选择器即直接在标签内部写css代码。

h3{ color:red; } 菜鸟教程四菜鸟教程这四种 css 选择器有修饰上的优先级，即：第四种 > id > class > 第三种CSS 创建

如何插入样式表?

外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存 hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");} 不要在属性值与单位之间留有空格（如："margin-left: 20 px"内部样式表(Internal style sheet)

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

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} 内联样式(Inline style)

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

这是一个段落。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性： h3 { color:red; text-align:left; font-size:8pt; } 而内部样式表拥有针对 h3 选择器的两个属性： h3 { text-align:right; font-size:20pt; } 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： color:red; text-align:right; font-size:20pt;多重样式优先级

样式表允许以多种方式规定样式信息。一般情况下，优先级如下：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS 背景背景颜色

background-color 属性定义了元素的背景颜色.

body {background-color:#b0c4de;}背景图像

background-image 属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body {background-image:url('bgdesert.jpg');}背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺,有时候，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body { background-image:url('gradient2.png'); background-repeat:repeat-x; }背景图像- 设置定位与不平铺

如果你不想让图像平铺，你可以使用 background-repeat 属性: background-repeat:no-repeat;

可以利用 background-position 属性改变图像在背景中的位置: background-position:right top;

背景- 简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中. 背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为: background-color background-image background-repeat background-attachment background-position 以上属性无需全部使用，你可以按照页面的实际需要使用.

CSS 背景属性 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。CSS 文本格式文本颜色

十六进制值 - 如: ＃FF0000; 一个RGB值 - 如: RGB(255,0,0); 颜色的名称 - 如: red

{color:red;}

文本的对齐方式

当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 {text-align:center;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰;主要是用来删除链接的下划线： {text-decoration:none;} 不建议强调指出不是链接的文本，因为这常常混淆用户: {text-decoration:underline;}

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。 p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。 {text-indent:50px;}

letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。如果想设置英文单词之间的间距，可以使用 word-spacing;

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 字体字体系列

font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”。

p{font-family:"Times New Roman", Times, serif;}字体样式

主要是用于指定斜体文字的字体样式属性。这个属性有三个值：正常 - 正常显示文本斜体 - 以斜体字显示的文字倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}字体大小

请务必使用正确的HTML标签，就h1 h6表示标题和p表示段落：字体大小的值可以是绝对或相对的大小。

Remark 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

设置字体大小像素 {font-size:30px;}

用em来设置字体大小 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。 h1 {font-size:2.5em;} /* 40px/16=2.5em */

使用百分比和EM组合 body {font-size:100%;} h1 {font-size:2.5em;}

font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-style 指定文本的字体样式 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 指定字体的粗细。CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。这四个链接状态是：

a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时(主要)a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面文本修饰

text-decoration 属性主要用于删除链接中的下划线： a:link {text-decoration:none;}

背景颜色

a:link {background-color:#B2FF99;}

CSS 列表

有序列表，无序列表，设置列表项标记为图像 list-style-type属性指定列表项标记的类型是；

ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} 列表项圆圈方块大写字母罗马字母要指定列表项标记的图像，使用列表样式图像属性： ul { list-style-image: url('sqpurple.gif'); } 列表 -简写属性 ul { list-style: square url("sqpurple.gif"); } 可以按顺序设置如下属性： list-style-type list-style-position (有关说明，请参见下面的CSS属性表) list-style-image 所有的CSS列表属性 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。CSS 表格表格边框 table, th, td { border: 1px solid black; } 请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。折叠边框 border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开： table { border-collapse:collapse; } table,th, td { border: 1px solid black; } Width和height属性定义表格的宽度和高度。 table { width:100%; } th { height:50px; } 表格文字对齐 td { text-align:right; } 垂直对齐 vertical-align:bottom; 表格填充 td { padding:15px; } 表格颜色 th { background-color:green; color:white; }CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。从外到内分别是：margin border padding content;

Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。

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

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

CSS 边框边框样式

边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式

none: 默认无边框 dotted: dotted:定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。效果取决于边框的颜色值边框宽度

您可以通过 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”

边框-单独设置各边p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;上右底左边框border-style:dotted solid double; 上左右都是底border-style:dotted solid; 上底右左border-style:dotted; 四面CSS 边框属性 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 设置元素的上边框的宽度。CSS 轮廓（outline）

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

outline 在一个声明中设置所有的轮廓属性 outline-color 设置轮廓的颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

Margin可以使用负值，重叠的内容。

简写属性 margin属性可以有一到四个值 margin:25px 50px 75px 100px; margin:25px 50px 75px; margin:25px 50px; margin:25px; 同前面的border 所有的CSS边距属性 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。

持续学习中 TO BE CONTINUE

【本文地址】

公司简介

联系我们