CSS的基本介绍 简介：CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。
1.直接采用style属性：
<!-- html与css相结合的第1种方式：给html标签添加style属性 --> <p style="color: #1f3 ;border:#1ff solid; ">这是我做css网页技术</p>2.style标签方式 ：
<!-- css与html的连接第二种方式 style标签方式 --> <style type="text/css"> p{ color: #0ff; border: 10px solid; } </style>3.导入方式
<style type="text/css"> /*css和html的连接第三种方式 导入css文件 */ @import url(mycss1.css);4.链接方式
<span style="white-space:pre"> </span><link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />CSS的相关语法： CSS代码格式 ： 选择器名称 { 属性名：属性值；属性名：属性值；…….} 属性与属性之间用 分号 隔开 属性与属性值直接按用 冒号 连接 如果一个属性有多个值的话，那么多个值用 空格 隔开
选择器： 就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器（标签本身就是封装数据的容器）。 1，选择器 一般三种：
html标签名选择器。使用的就是html的标签名。class选择器。其实使用的是标签中的class属性。id选择器。其实使用的是标签的中的id属性。 每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。 在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。 示例一html标签选择器： <span style="white-space:pre"> </span><style> div{ background: #FF5151; font-size: 12px; }示例二html标签选择器： class选择器：<在style中以“.”开头的为class选择器，使用时候只需要 class="mm"即可使用>
<span style="white-space:pre"> </span><span style="font-family: Arial, Helvetica, sans-serif;">.mm{</span>示例三id选择器： <在style中以“#”，开头是的id选择器，使用的时候只需要 id="pid"就可以使用>
#pid{ font-size: 50px; color: #2828FF; }选择器的优先级 ： 标签名选择器（远距离统一设置） < class选择器（单个设置） < id选择器 （单个设置） < style属性（最近距离设置） 扩展 关联选择器 ： 标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。例如：
<span style="white-space:pre"> </span>p { color:#00FF00;} <span style="white-space:pre"> </span>p b { color:#FF000;} <span style="white-space:pre"> </span><p>P标签<b>湖南城市学院</b>段落样式</p> <span style="white-space:pre"> </span><p>P标签段落</p> <strong> </strong>组合选择器: 对多个选择器进行相同样式的定义。例如，我们想对“div中的标签”和“类名为cc”的区域设置相同的样式，则可以定义如下的组合选择器：
<span style="white-space:pre"> </span>span b,.cc{ color: #9F35FF; font-style: italic; <span style="white-space:pre"> </span>}多样的伪元素选择器 伪元素选择器：就是有连续两个冒号的选择器，如::first-line::first- letter、::before 和::after
E::first-letter文本的第一个单词或字（如中文、日文、 韩文等） E::first-line 文本第一行； E::selection 可改变选中文本的样式； E::before和E::after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> p::first-letter { /* 选择第一个字 */ color: red; font-size: 25px; } p::first-line { /* 选择第一行 */ color: green; font-size: 20px; } p::selection { /* 选中变色 */ color: blue; } div:before { /* 放在盒子内部的前面 */ content:"一只"; } div:after { /* 放在盒子内部的后面插入 */ content:"猪"; } </style> </head> <body> <h1>静夜思</h1> <p>床前明月光，疑是地上霜。举头望明月，低头思故乡</p> <div>特立独行的</div> </body> </html>实现效果
