基础CSS

概念

CSS:层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的
css可以分别为网页的各个层次设置样式。

优势

网页的表现统一，容易修改。
丰富的样式，使得页面布局更加灵活。
减少网页的代码量，增加网页的浏览速度，节省网络带宽。
运用独立于页面的CSS，有利于网页被搜索引擎搜录。

CSS样式引入

css引入样式的方法有三种，分别是“行内样式”，“内部样式”，“外部样式”。

CSS基本样式

字体样式

1、font-style字体风格——常用属性值normal、italic（斜体）、oblique（倾斜体样式）1
2、font-family：设置字体类型
3、font-size：设置字体大小（正常16px左右）
4、font-weight：字体加粗属性——常用属性值normal(默认值，定义标准的字体)、.bold(粗体字体)、.bolder(更粗的字体)、.lighter(更细的字体)，还可以用100、200、300、400、500、600、700、800、900：定义由细到粗的字体，400等同于normal，700等同于bold。

文本样式

1、text-indent: 36px：文本缩进(用像素)
2、color：颜色，可以用英文，也可以用rgb表示
3、text-decoration：有三个属性：none、underline、line-through，分别是没有任何线、有下划线、有删除线（中间的线）。
4、text-align：常用四个属性center、left、right、inherit即让文本居中，左对齐，右对齐和继承父元素的text-decoration属性。
5、line-height：设置行高，将行高设置的和父元素高度相同，可以使文本垂直居中

链接样式

给链接设计样式，需要注意顺序：爱恨原则 LoVe HAte。而且不要个一个超链接加过多的伪类a:link：未访问前的样式、a:visited：已经访问的超链接样式、a:hover：鼠标移动到链接的样式、a:active：点击未释放的样式

背景样式

无非两种，一种是单纯的颜色，另一种是用图片作为背景
1、单纯一种颜色：background-color： 颜色：设置颜色，还可以设置渐变色
如：background:-webkit-linear-gradient(bisque,rgb(203,239,253));
2、用图片作为背景：background: url(../image/1.jpg) no-repeat;（顺序无所谓，也可以进行分开写）

列表样式

list-style-type: ;用作设置列表样式，也就是每一条前面那个标记。常用值none 无标记符号disc 实心圆，默认类型，circle:空心圆，square:实心正方形，decimal：数字。
list-style-image: url;用作将一个图片作为前面那个标记。（url括号内为图片地址）

边框样式

边框样式通常用一条语句：border: 2px solid red;其顺序为：边框宽度>边框样式>边框颜色。当然也可以分开写。

表格样式

1、border-collapse: collapse;合并边框，其默认值为separate，也就是边框并不会合并。
2、cellpadding="20px"这是行内引入，设置表格单元边界与单元内容之间的间距设置为 20 px。
3、cellspacing=100"也是行内引入规定单元格之间的空间为100px。

CSS选择器

具体实现不讲，只讲如何记忆
标签选择器：直接是元素类型
ID选择器：有一个#
Class选择器：有一个.（注意，name可以重复，所以class选择器作用的有可能不止一个）
后代选择器：不好直接选，就先选需要的元素的父类，再导过去，特点是有空格，为：父元素名 子元素名（注意，空格是关键，并且作用于所有后代，于子元素选择器区分）
子元素选择器：把后代选择器的空格换成">"(只查找下一代这一代，不会殃及孙子辈)
兄弟选择器：一个是用“+”，选择紧邻的元素，（你知道了紧跟着的袁术是什么类型的）一个是用“~”，意思是后面的所有兄弟元素，从这里面查找你想要的如：p~h2{}，也就是p标签后面兄弟元素中的h1标签，不用紧邻着。（选同辈的前一个元素好像没有）
伪类选择器：你用选择器选择出了好几个，你就可以选择第几个如p：first-child也就是p标签的第一个孩子。最常用的就是:link选择器 选择未访问链接元素等。
属性选择器：根据某个标签的属性和属性值来选择对应的元素，如input[name="UserName"]重点是有方括号
并集选择器：就是好几个选择器内容一样，就直接写在一起了，每个选择器的名字用“，”隔开。

基础CSS