您的位置：首页 > Web前端 > CSS

CSS菜鸟笔记

2017-12-19 00:44 357 查看
最近想学习学习前端相关，先从基础吧；

本文主要是在菜鸟笔记上的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 和 Class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 “#” 来定义。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

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

<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>


class 选择器

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

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

.center
{
text-align:center;
}

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

你也可以指定特定的HTML元素使用class。
p.center
{
text-align:center;
}
</style>

<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>


除了提到的 id 和 class 选择器外

第三种选择器为标签选择器，即以 html 标签作为 css 修饰所用的选择器。

第四种选择器即直接在标签内部写css代码。

<style>
h3{
color:red;
}
</style>
<h3>菜鸟教程</h3>

四
<h3 style="color:red;">菜鸟教程</h3>

这四种 css 选择器有修饰上的优先级，即：
第四种 > id > class > 第三种


CSS 创建

如何插入样式表?

外部样式表(External style sheet)

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

每个页面使用 标签链接到样式表。 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 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标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


内联样式(Inline style)

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

<p style="color:sienna;margin-left:20px">这是一个段落。</p>


多重样式

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

例如，外部样式表拥有针对 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航