爱站程序员基地CSS简介
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS 创建
如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head><link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"></head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}p {margin-left:20px;}body {background-image:url(\"/images/back40.gif\");}
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url(\"images/back40.gif\");}</style></head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style=\"color:sienna;margin-left:20px\">这是一个段落。</p>
css的选择器
style选择器学习：
1、全局标签：标签名{}作用：给当前网页中所有该标签增加样式2、id选择器：#属性的id属性值{}作用：给某个指定的标签添加指定的的样式3、类选择器：.类选择器名{}作用：给不同的标签添加相同的样式4、全部选择选择器：*{}作用：给所有的HTML标签添加相同的样式5、组合选择器：选择器1，选择器2，....{}作用：解决不同的选择器间重复样式的问题6、子标签选择器：父标签 子标签 子标签...{}作用：给所有的该标签嵌套标签添加样式7、属性选择器：标签[属性名=属性值]{}作用：给特定的标签属性加上样式
代码：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>css的选择器学习</title><!--style选择器学习：全局标签：标签名{}作用：给当前网页中所有该标签增加样式id选择器：#属性的id属性值{}作用：给某个指定的标签添加指定的的样式类选择器：.类选择器名{}作用：给不同的标签添加相同的样式全部选择选择器：*{}作用：给所有的HTML标签添加相同的样式------------------------以上必须掌握------------------------------------组合选择器：选择器1，选择器2，....{}作用：解决不同的选择器间重复样式的问题子标签选择器：父标签 子标签 子标签...{}作用：给所有的该标签嵌套标签添加样式属性选择器：标签[属性名=属性值]{}作用：给特定的标签属性加上样式--><style type=\"text/css\">/* 普通标签样式*/hr{height: 5px;background-color: red;}table{background-color: blue;height: 200px;width: 200px;}/* id选择器 */#t{background-color: red;}/* 类选择器 */.common{color: gray;}/* 组合选择器 */p a,h5 a{color: aqua;}/* 子标签选择器 */ul li{color: brown;}/* 属性选择器 */input[type=text]{background-color: red;}</style></head><body><h3>css的选择器学习</h3><hr><table id=\"t\" class=\"common\"><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></table><table><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>2</td><td>2</td><td>2</td></tr></table><p><a href=\"\">百度一下</a></p><h5><a href=\"\">搜狗一下</a></h5><b class=\"common\">css标签选择器的学习</b><ul><li>哈哈</li><li>呵呵</li><li>嘻嘻</li></ul><input type=\"text\" name=\"uname\" id=\"\" value=\"\" /><br><input type=\"password\" name=\"upwd\"></body></html>
结果显示：
css常用样式
直接上代码:
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>css常用样式学习</title><!-- 常用样式学习 --><!-- 表格样式学习 --><style>body{background-image: url(img/1.jpg); /* 选择图片路径*/background-repeat: no-repeat;/* 不允许图片重复 */background-size: cover;/* 图片平铺 */}/* 设置表格样式 */table{}/* 设置行高 */tr{height: 50px;}/* 设置单元格样式 */td{width: 100px;/* 设置行宽 */border: solid 1px;/* 设置边框线 */border-radius: 10px;/* 设置边框角度 */text-align: center;/* 设置字体的位置 */background-color: orange;/* 设置背景颜色 */font-weight: bold;/* 加粗字体 */letter-spacing: 10px;/* 字体与字体之间的间隙 */}/* --------------------------------------------------------------------- *//* 列表样式学习 */ul{background-color: gray;/* 设置列表的背景颜色为灰色 */height: 50px;/* 设置列表的高度 */}li{list-style-type: none;/* 设置列表前边的黑点消失 */float: left;/* 设置每个列表选项靠左 */}li a{font-weight: bold;/* 设置字体加粗 */font-size: 20px;/* 字体大小 */color: blue;/* 颜色 */margin-left: 20px;/* 设置每对字体间的间隔 */position: relative;/* 设置字体相对于列表的位置 */top:10px;/* 设置字体距离列表上方的距离 */}</style></head><body><h3>css常用样式学习</h3><hr><table><tr><td>姓名</td><td>性别</td><td>爱好</td></tr><tr><td>张三</td><td>男</td><td>唱歌</td></tr><tr><td>李四</td><td>男</td><td>跳舞</td></tr></table><hr><ul><li><a href=\"\">首页</a></li><li><a href=\"\">java</a></li><li><a href=\"\">python</a></li><li><a href=\"\">c#</a></li></ul></body></html>
实现结果：
图片案例
代码：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">body{text-align: center;background-color: gray;}img{width: 12%;height: 200px;border: solid 1px;padding: 10px;/* 设置内容和边框之间的距离 */background-color: white;transform: rotate(-10deg);/* 设置旋转的角度 */margin: 20px;}img:hover{transform: rotate(0deg) scale(2);/* 设置照片旋转的角度（正数是顺时针旋转，负数逆时针旋转） scale是放大的倍数 */z-index: 1;/* 设置图片显示的优先级 */transition: 1.5s;/* 设置旋转的时间 */}</style></head><body><br><br><br><br><br><img src=\"img/1.jpg\" alt=\"\"><img src=\"img/2.jpg\" alt=\"\"><img src=\"img/3.jpg\" alt=\"\"><img src=\"img/4.jpg\" alt=\"\"><br><img src=\"img/5.jpg\" alt=\"\"><img src=\"img/6.jpg\" alt=\"\"><img src=\"img/7.jpg\" alt=\"\"><img src=\"img/8.jpg\" alt=\"\"></body></html>
实现结果
光标放在图片上会有不同的效果**（火狐浏览器打开，多尝试几个浏览器）**
盒子模型案例
代码：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>盒子模型案例</title><style type=\"text/css\">div{height: 300px;width: 300px;margin-left: 20px;}#header,#tail{width: 700px;margin: auto;margin-top: 50px;}#div01{border: solid 1px orange;float: left;}#div02{border: solid 1px blue;float: left;}#div03{border: solid 1px red;float: left;}#div04{border: solid 1px purple;float: left;}</style></head><body><div id=\"header\"><div id=\"div01\">我是div01</div><div id=\"div02\">我是div02</div></div><div id=\"tail\"><div id=\"div03\">我是div03</div><div id=\"div04\">我是div04</div></div></body></html>
实现结果：
