CSS
我们学过HTML之后，编写的简单HTML文件并没有对网页的各个内容进行样式设置，虽然有很多标签内部属性也会对标签元素内容进行基本的格式设置，但未免有些太过繁琐，从而使得代码观感不佳，所以要是用CSS（Cascading Style Sheets）对网页进行格式设置，这样可以使得内容与样式分离，大大提高工作效率。
CSS基本语法
- CSS基本语法
CSS的基本语句有两部分构成：选择器和声明。而声明又是由一些属性和属性值构成，要注意的是，在css中属性与属性值之间用：连接，属性值没有“”包围。不同属性之间用分号隔开。选择器就是要改变的HTML元素，同时也没有尖括号包围。
css语句中注释由"/“开头，以”/"结束。
举个例子
p
{
color:red;
text-align:center;/*居中*/
}
- 创建CSS
CSS的创建方式有三种：外部样式表、内部样式表和行内样式表。
首先外部样式表是通过外部的一个扩展名.css的文件来设置网页格式。外部样式表可以为多个文件设定样式。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
首先在HTML的<head>标签内部，设定一个<link>标签，标签的href属性值即为外部css文件名。
内部样式表是在HTML文件<head>标签内部嵌套<style>标签进行设置。
<head>
<style>
hr {color:blue;}
p {margin-right:15px;}
body {background-image:url("images/aha.gif);}
</style>
</head>
行内样式就是使用各个标签的style属性进行样式设定。
<p style="color:sienna;margin-left:20px">啊哈</p>
显然，我们可以将上述三种样式表同时使用，那么当对同一属性进行设定但是设定值不同时就会涉及优先级的问题，此时行内样式表>内部样式表>外部样式表。
3. id和class选择器
上边我们说可以使用内部样式表，但是如果我想在元素中设定css样式，但不想使用繁琐的行内设定，就可以在标签中设定"id" 和 “class"选择器。在设置时要注意选择器属性不要用数字开头。
id选择器以 “#” 来定义，class选择器以一个点”."号定义。同一个html网页页面可以无数次的调用相同的class类，当要为同一元素使用不同样式时，要使用不同的类来定义，而id选择器通常只被引用一次。
定义：
<style>
#para1
{
text-align:center;
color:red;
}
.center
{
text-align:center;
}
</style>
引用：
<p id="para1">Hello World!</p>
<p class="center">会居中</p>
- 背景
css自定义背景有以下几个属性：
background-color：背景颜色
background-image： 背景图片
background-repeat ：no-repeat/repeat-x/repeat-y 水平还是垂直还是不平铺
background-attachment：固定还是滚动
background-position：图片位置
同时这几个属性可以简写成background：属性值按照上述顺序依次给出，中间用空格隔开。
<style>
body
{
background-image:url('tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
div
{
background-color:#b0c4de;
}
.bj
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
- 文本
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰，（下划线）
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母大小写
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
6.字体
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式 正常normal和斜体italic
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
- 链接
我们知道链接有很多状态，所以就可以根据连接的不同状态来设定链接样式。
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
举个例子：
<style>
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
</style>
- 列表样式
HTML中有有序列表和无序列表两种类型，运用列表样式设置可以设置列表项目的标记。比如无序列表是选择小圆点还是小方框，有序列表是使用罗马数字还是字母等等。同时列表项目标记也可以使用图片来表示。
<style>
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;}
</style>
以上就是用class定义的选择器，只要在列表标签里设置class属性值即可。
-
表格
对于一个表格来说，表格属性有很多， 边框（border）、宽度（width）、高度（heigth）、文本对齐方式（text-align）、垂直对齐方式（vertical-align）、颜色（color）等等。 -
盒子模型
盒子模型是一个形象的说法，也就是说所有的HTML元素都可以称是一个盒子，主要包括以下几个部分：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
每一个部分都有其相应的属性值可以使用。因此要考虑盒子进行设定宽度和高度时，也需要把边距考虑进去。
外边距 Margin：外边距有四个单独外边距属性，分别为margin-top，margin-bottom，margin-right，margin-left。同时还有一个简写属性margin，当简写属性有四个值时，则其分别表示为上、右、下、左；有三个值时，分别表示上、左右、下；有两个值时，分别表示上下、左右；只有一个值时，表示上下左右。
边框（Border）：边框可以设置样式（border-style）、颜色（border-color）、宽度（border-width），这三个属性可以对四周单独进行设置，也可以进行简写设置，与外边距同。同时也可以利用border属性直接设置，此时属性值依次为宽度、样式、颜色。还有要注意的是，border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。下面举个例子：
p
{
border-top-style:dotted;
border-right-width:5px;
border-bottom-style:dotted;
border-bottom-color:red;
}
p1
{
border-style:dotted solid;
}
p2
{
border:5px solid red;
}
内边距（padding）：padding使用方式与外边距相似。
12.分组和嵌套
在css书写时常常会有很多元素样式相同，因此我们就可以将这些选择器组合成一组，每个选择器时间用逗号隔开：
h1,h2,p
{
color:green;
}
嵌套选择器就适合选择器里边的选择器样式，例如：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
- css 尺寸
尺寸的主要属性如下：
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。 - css定位
css定位属性有五个定位类型：static、relative、fixed、absolute、sticky，定义好定位属性值以后就可以设置 top, bottom, left, right属性值。
static定位是静态定位，即没有定位，遵循HTML默认，静态定位的元素不会受到 top, bottom, left, right影响。
fixed定位是指元素的位置相对于页面是固定的，不会随页面的滚动而移动。
relative定位是指元素的位置相对正常位置定位。但是元素原来站的空间并不会发生变化。
absolute 定位是指绝对定位，绝对定位的的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
sticky 定位即为粘性定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是 top, right, bottom 或 left 之一。 - css 溢出
css overflow 属性用于控制内容溢出元素框时显示的方式。
visible 是默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 - css组合选择符
css选择器中组合选择符可以确定两者的关系，在csss3中包含了四种组合方式，后代选择器(以空格分隔)、子元素选择器(以大于号分隔）、相邻兄弟选择器（以加号分隔）、普通兄弟选择器（以破折号分隔）
后代选择器以空格分隔，用于选择某元素的所有后代元素；
子元素选择器以大于号分隔，勇于选择某元素的子元素，但并不会渲染其他后代元素。
相邻兄弟选择器以加号分隔，可选择紧接在另一元素后的一个元素，且二者有相同父元素。
普通兄弟选择器以破折号分隔，选取指定元素之后的所有相邻兄弟元素。 - 其他属性选择器
[title]
{
color: green;
} /*改变所有含有title的元素样式*/
[title=apple]
{
color: green;
} /*改变所有title='apple'的元素样式*/
[title~=apple]
{
color: green;
} /*改变所有title中含有独立apple单词的元素样式*/
[title*=apple]
{
color: green;
} /*改变所有title中含有apple单词的元素样式*/
[title|=apple]
{
color: green;
} /*改变所有title中含有以apple单词开头且独立唯一或者以-隔开的元素样式*/
[title^=apple]
{
color: green;
} /*改变所有title中前几个字母为apple的元素样式*/
[title$=apple]
{
color: green;
} /*改变所有title中后几个字母为apple的元素样式*/
后记
基本内容学了这么多，上述可以基本对网页进行渲染，同时我们在浏览一个网页时通常也会个人网页进行交互，因此就用到了JavaScript，学完css下一步就是要学习JS啦
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
