选择器+样式
eg:
p { color :red }
CSS规则集
选择器：
HTML 元素的名称位于规则集开始（本例是p选择器 ）。HTML 元素可选择一个或多个样式添加。给不同元素添加样式只需更改选择器即可
声明：表示一个单独的规则。由属性和属性值组成，本例是 color：red
属性：表示改变 HTML 元素样式的途径。本例中color就是改变<P>元素字体颜色的途径
属性值：它从指定属性的众多外观中选择了一个值。本例中，red就是color的值。颜色种类成千上万，除了red外，color的值还可以有yellow, pink, black等等
注意：
1、除了选择器的部分，每个规则集都应该包含在一对的大括号里：{ }。
2、在每个声明里要用冒号将属性与属性值分隔开。
3、在每个规则集里要用分号将多个声明分隔开：
4、选择多个元素，将其同时修改成一种样式，不同的选择器用逗号分开
eg:
p{
color:red; //颜色红
width:500px; //宽度500px
border:1px solid black;//纯黑边框
}
p,li,h1{
color:red;
}
CSS盒模型
CSS 布局主要就是基于盒模型。每个占据页面空间的块都能有这样的属性：
padding: 内边距。它围绕着内容的空间。
border: 边框。它紧接着内边距的线。
margin: 外边距。它围绕元素外部的空间。
1、网页背景颜色
eg:
html {
background-color: #00539F;
}
属性：background-color
颜色：# + 颜色的十六进制编码
（可查询在线取色器）
2、文档格式设置
eg:
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
以上每个属性的含义是：
width: 600px body元素的宽度保持 600 像素。
margin: 0 auto 为 margin 或 padding 等属性设置两个值，第一个值代表元素的上、下方向（本例设置为 0）；第二个值代表左、右两边（本例中的auto是特殊值，含义是水平方向左右对称）。
background-color: #FF9500 它指定元素的背景颜色。
padding: 0 20px 20px 20px内边距设置的四个值。用于给网页内容的四周制造一些空白空间。这些空间为右边、下方，左边的内边距，像素为20。它们的值按照上、右、下、左的顺序排列。
border: 5px solid black 直接为 body 设置 5 像素的纯黑色实线边框。
3、简单样式
eg:
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
未给元素设置CSS样式之前，浏览器已为元素设置了一些默认样式。
但不同的浏览器设置的默认样式有差异。为了使页面在多种浏览器下具有相同的展示效果，开发者通常会重新设置这些默认样式。
属性margin: 0。它能够去掉浏览器为h1设置的围绕在四周的空白缝
属性padding使标题的上下内边距像素为 20 。
属性color,控制了标题的颜色。颜色采用十六进制颜色代码#00539f表示。
属性text-shadow,它为文本提供阴影。其4个值的含义分别是：
第一个3px：水平偏移值 ，它是阴影右移的像素数。
第二个3px：垂直偏移值 ，它是即阴影下移的像素数。
1px: 阴影的模糊半径 , 它的值越大产生的阴影就越模糊。
black: 阴影的颜色
图像居中
img {
display: block;
margin: 0 auto;
}
注意： <body>是块级元素，意味着它能占据页面空间并能采用外边距和其他改变间距的值。而<img>是内联元素，不具备块级元素的功能。为了使图像也能拥有外边距，我们必须使用display：block赋予其块级元素的行为
网友评论