主要内容（图片来源）
css概述
css的基本使用
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css的基本使用</title>
<!--设置所有h2的标签为红色-->
<style>
h2{
color:red;
font-family:"arial black";
}
</style>
<link rel="stylesheet" type="text/ css" href="css/style.css" />
</head>
<body>
<!--
cSs的基本使用
-.CSS的定义
选择器名{
属性名:属性值;属性名:属性值;
}
注意点:
1.声明;需要使用自}括起来,每个声明以分号;结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成，则用引号引起来
=、Css的注释
/*注释内容*/三、CSs的三种使用方式:
1.行内样式
直接写在标签上的样式,在标签上通过style属性定义的样式
2．内部样式
定义在style标签中的样式, style标签一般设在head标签中
3．外部样式
定义在外部的css文件中，通过link标签引入
注：当有多重样式时，越精准越优先（就近原则）
-->
<h2>你好</h2>
<h2 style="color:red;font-family:宋体">你好</h2>
<h2>你好</h2>
</body>
</html>
代码结果
………………………………………………………………………………………………………………………………………………………………………………………………………………………………
css的选择器
代码 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css的基本选择器</title>
<style type="text/css">
/*通用选择器* */
*{
color:blue;
}
/*··元素选择器·*/
div {
font-size: - 30px;
}
/*..ID选择器·#。.*/
#p1 {
background-color : #FAEBD7;
}
/*..类选择器·.·.*/
.cls1{
font-family:楷体;
}
/*分组选择器*/
#p1,.cls1,font {
text-decoration: line-through;
}
</style>
</head>
<body>
<!--
css基本选择器
1．通用选择器*
*{
属性名:属性值;
}
2．元素选择器
元素名/标签名{
属性名:属性值;
}
3.ID选择器#
#id属性值{
属性名:属性值;
}
4．类选择器.
.class属性值
{
属性名:属性值；
…………
}
5．分组选择器
选择器1.,选择器2 ,x选择器3...
{
属性名:属性值;
}
-->
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个p</p>
<span class="cls1">这是一个span</span><br>
<span class="cls1">这是一个span</span><br>
<font>这是一个font</font>
</body>
</html>
代码结果2
………………………………………………………………………………………………………………………………………………………………………………………………………………………………
代码3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css的组合选择器</title>
<style type="text/css">
/*后代选择器*/
.food li{
border: #9ACD32 solid 1px;
}
/*子代选择器*/
#food2 >li {
border: palegoldenrod dotted 1pX;
}
/*相邻兄弟选择器*/
#mydiv + div {
background-color: #ff5500;
}
/*普通兄弟选择器*/
#mydiv2 ~ div {
background-color :#FA8272;l
}
</style>
</head>
<body>
<!--
组合选择器
后代选择器
选择指定元志的所有指定后代元su，以空格限开
选择器 指定元素{
属性名;属性值;
}
子代选择器
选择指定元素的第—代子元素,以大于号>隔开
选择器>指定元家{
属性名:属性值;
}
相邻兄弟选择器
选择指定元京的下一个指定元素(只会找一个），两者有相同的父元京，以加号+隔开
选择器＋指定元素{
属性名:属性值;
}
普通兄弟选择器
选择指定元素后面的所有指定元素，两者有相同的父元素，以加号~隔开
选择器 ~ 指定元素{
属性名:属性值;
}
-->
<ul class="food" >
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨< /li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr>
<ul id="food2">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr>
<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
<hr >
<div>普通兄弟选择器1</div>
<div id="mydiv2">普通兄弟选择器2</div>
<div>普通兄弟选择器3</div>
<div>普通兄弟选择器4</div>
</body>
</html>
代码结果
菜鸟扩展
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
实例
HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。
HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
实例
文本对齐属性 text-align取代了旧标签 <center> 。
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
HTML 样式标签
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
