本文深入讲解CSS的功能与优势，包括其在网页美化和布局中的作用。详细介绍了CSS与HTML的结合方式，如内联样式、内部样式和外部样式。探讨了CSS的基本语法，以及各种选择器的使用，如ID选择器、元素选择器和类选择器。此外，还介绍了CSS的扩展选择器和常见属性，如字体、文本、背景、边框和尺寸。
CSS
功能：页面美化和布局
概念：Casscading style Sheets 层叠样式表，多个样式可以作用在同一个html元素上，同时生效。
优势：功能强大；将内容展示和样式控制分离，降低耦合度，让分工协作更容易；
一、Css和html结合方式
1.内联样式
在标签内使用style属性指定css代码
<div style="color:red;">hello world</div>>
2.内部样式
在head标签内，定义style标签，style标签的标签内容就是css代码。
<head>
<style>
div{color:red;}
</style>
</head>
3.外部样式
-
定义css资源文件
-
在head中定义link标签，引用css资源文件
<link rel="stylesheet" href="css\divStyle.css">
注意：
1,2,3中css作用的范围越来越大。第1种方式不常用。
第三种可以写成如下所示：（不常用）
4.css基本语法
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
...
}
选择器：筛选具有相似特征的元素。
注意：每一对属性需要使用 ；隔开，最后一对属性可以不加。
二、选择器
筛选具有相似特征的元素；
1.基本选择器
-
ID选择器：选择具体的id属性值得元素。
语法：#id 属性值{}#div1{ color:#ff00ff; } ... <div id="div1">id选择器</div> -
元素选择器：选择具有相同标签名称的元素。
语法：标签名称{}`
div{ color:#ff00ff; } ... <div id="div1">id选择器</div>注意：id选择器优先级高于元素选择器。
-
类选择器：：选择具有相同的class属性的元素
语法：.class 属性值{}
.clsl{ color:#ff00ff; } ... <div class="cls">id选择器</div>注意：类选择器的优先级高于元素选择器，低于id选择器。
2.扩展选择器
1.选择所以元素
语法：*{}
2.并集选择器：
语法：*选择器1，选择器2{ }
3.子选择器：筛选选择器1之下的选择器2筛选出来的元素。
语法：选择器1 选择器2{ }
4.父选择器：筛选选择器2的父元素选择器1.
语法： 选择器1选择器2{ }
5.属性选择器;选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{ }
6.伪类选择器：选择一些元素具有的状态
语法：元素：状态{ } 例如：超链接的访问
三、属性
1.字体、文本
-
font-size:字体大小
-
color:文本颜色
-
text-align:对齐方式
-
line-height:行高
style{ p{ color:red; font-size:30px; text-align:left; line-heith:35px; } }
2.背景
backgroud:#ff00ff
background:url(“img/logo.jpg”) no-repeat center;
3.边框
border: 1px solid red;
4.尺寸
width：100px;
height: 100px
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
