首页 > 开发 > 前端 > 正文

CSS基础笔记

2016-04-17 22:34:46  来源:慕课网

一、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参考手册