小小城序员
小小城序员

css的入门笔记

css入门笔记

这些都是本人（小白）在学习css过程中记录下的笔记，都是些基础的知识，部分知识没有深入了解

css的简介

什么是css？
css指层叠样式表,可以定义如何显示html元素，控制页面的布局与外观。
书签
  • css的三种基本选择器
  • css的四种组合选择器
  • css的伪类选择器
  • css的伪元素选择器
  • css的三种创建方法
  • css的背景属性
  • css的尺寸属性
  • css的文本属性
  • css的字体属性
  • css的列表属性
  • css的盒子模型
  • css的边框模型
  • css的display属性
  • css的浮动float
  • css的定位position

css的内容

css的注释
/*这是css的注释*/
css的三种基本选择器
标签选择器，id选择器，class选择器 
/*标签选择器:用于修饰标签是
的所有元素*/
div {
color:yellow;
}

/*id选择器:用于修饰id=id1的所有元素*/
#id1 {
color:yellow;
}

/*class选择器:用于修饰class=class1的所有元素*/
.class1 {
color:yellow;
}
css的四种组合选择器
后代选择器，子元素选择器，相邻兄弟选择器，普通兄弟选择器 
/*后代选择器:用于修饰
标签中的所有
标签*/
div p {
color:yellow;
}

/*子元素选择器:用于修饰
标签中的子元素
标签*/
div>p {
color:yellow;
}

/*相邻兄弟选择器器:用于修饰
标签的后的相邻第一个
标签*/
div+p {
color:yellow;
}

/*普通兄弟选择器:用于修饰
标签的后的相邻所有
标签*/
div~p {
color:yellow;
}
css的伪类选择器
css伪类用于添加一些选择器的特殊效果。（简） 
a:link {color:yellow;}      /* 未访问链接时，链接显示的颜色*/
a:visited {color:red;}      /* 已访问链接后，链接显示的颜色 */
a:hover {color:black;}      /* 鼠标移动到链接上时，链接显示的颜色 */
a:active {color:green;}     /* 鼠标点击链接时，链接显示的颜色 */
input:focus{background-color:yellow;}  /*输入框获取焦点时的变化*/
css的伪元素选择器
css伪元素是用来添加一些选择器的特殊效果。（简） 
p:after{ 
content:"**";   /*在每个
标签后添加"**"*/
} 

p:before {
content:"**";   /*在每个
标签前添加"**"*/
}
css的三种创建方法
外部样式表：在头部中，添加标签链接css文件，在该css文件中定义样式表 

<head>
<link rel="stylesheet" type="text/css" href="wuhu.css">
head>

/*css文件:wuhu.css*/
div {
color:yellow;
}

内部样式表：在头部，添加