CSS学习——day01
学习css之前你需要基本理解一下
- HTML、XHTML
上一个博客中有提及
HTML学习
什么是css
- css指层叠样式表
- css样式定义如何显示HTML元素
- 样式通常存储在样式表中
- css分为尾部样式与内部样式
- 外部样式可以极大的提高工作效率
- 外部样式存储在css文件中
- 多个样式可以层叠为一个（可以一个css套另一个css）
css语法
css语法有两部分构成：选择器、声明（可一条声明，也可多条声明）
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
p
{
color:red;
text-align:center;
}
css ID和 class
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>#这里即使加入 id="paral"文本格式也不会发生改变
</body>
</html>
#注意，ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox 浏览器中不起作用。
class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> #此处两行都可以调用class来完成文本格式的改变
</body>
</html>
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
当你指定元素使用class后，其他元素不会在受class的影响
特别注意！！！！！：id选择器只能使用一次（自己的理解）class可以使用多次。（具体细节看前边那个代码中的注释）
css创建
如何插入样式表
有三种方法：
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<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");}
内部样式表
当一个文件需要特殊样式是，使用内部样式比较好。使用style标签在head标签里定义内部样式表。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
内联 > 内部 > 外部 > 浏览器默认样式
注意：外部样式放在内部样式的后面，外部将覆盖内部。
（谁在里面谁说了算）
CSS 优先级法则：
-
A 选择器都有一个权值，权值越大越优先；
-
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
-
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
-
D 继承的CSS 样式不如后来指定的CSS
样式； -
E 在同一组属性设置中标有“!important”规则的优先级最大
-
内联样式表的权值最高 1000；
-
ID 选择器的权值为 100
-
Class 类选择器的权值为 10
-
HTML 标签选择器的权值为 1
css背景
背景颜色
background-color 属性定义了元素的背景颜色
body {background-color:#b0c4de;}
颜色值定义的方式：
- 十六进制
- RGB 如：rgb（250,0,0）
- 颜色名称。如：“red”
背景图像
ackground-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('paper.gif');}#看着不协调
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;#将x改为y就是竖直方向
}#使图像只是在水平方向平铺
如果你不想让图像平铺，你可以使用 background-repeat 属性:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
所有css文本属性
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 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
css链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
注意：当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
css列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
