CSS基础笔记

一、CSS常见基础
①-选择器：
1、子选择器：这行代码会使class名为food下的子元素li 加入红色实线边框。用于选择指定标签元素的第一代子元素

.food>li{border:1px solid red;}

2、包含(后代)选择器：即加入空格,用于选择指定标签元素下的后辈元素.
与子选择器的区别在于：>作用于元素的第一代后代，空格作用于元素的所有后代。
例如下面代码，包含选择器会在food下的所有li标签加上1px的红色实线，不管是food下li标签中的li标签，只要是在food中的li。而子选择器只是作用于在food下的第一代li，如果是food下li标签中的li标签则不会被添加样式、、、

.food li{border:1px solid red;}

3、伪类选择符：
a:link {color: #FF0000} / 未访问时的状态 /
a:visited {color: #00FF00} / 已访问过的状态 /
a:hover {color: #FF00FF} / 鼠标移动到链接上时的状态 /
a:active {color: #0000FF} / 鼠标按下去时的状态 （很少定义）/

4、分组选择符：当为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

②-CSS文字排版：
1、使用css样式来改变文字的样式：粗体、斜体、下划线、删除线：
为P标签下的span设置粗体：p span{font-weight:bold}
为P标签下的span设置斜体：p span{font-style:italic;}
为P标签下的span设下划线：p span{text-decoration:underline;}
为class名为oldPrice的部分设置删除线：.oldPrice{text-decoration:line-through;}
2、其他：
文本缩进：p{text-indent:2em;}
设置字母与字母之间的间距：h1{letter-spacing:20px;}
设置英文单词之间的间距：h1{word-spacing:50px;}
行间距（行高）：p{line-height:1.5em;}
块状元素中的文本、图片设置居中样式:h1{text-align:center}//中-左-右-：center-left-right

③-盒子模型：
1、元素分类：
常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

将内联元素改为块状元素，例：a{display:block;}
块级元素特点：
one、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
two、元素的高度、宽度、行高以及顶和底边距都可设置。
three、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

将块状元素设为内联元素，例：div{display:inline;}
内联元素特点：
one、和其他元素都在一行上；
two、元素的高度、宽度及顶部和底部边距不可设置；
three、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

<img>、<input>

同时具备内联元素、块状元素的特点，代码:a{display:inline-block;}
inline-block 元素特点：
one、和其他元素都在一行上；
two、元素的高度、宽度、行高以及顶和底边距都可设置。

---

二、CSS样式的水平居中和高度居中

CSS样式的水平居住和高度居中

---

三、CSS中关于字体样式、元素分类、盒子模型
CSS中关于字体样式、元素分类、盒子模型

---

四、如何给网页css样式起个好名字？
如何给网页css样式起个好名字？

---

CSS参考手册