CSS介绍
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
那么CSS和Html是如何在网页代码中相结合的呢？
通过四种方式
|
1. style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
|
|
2. style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
|
|
3. 导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
|
|
4. 链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
|
|
5. 样式优先级：
由上到下，由外到内。优先级由低到高。
|
|
6. 总结CSS代码格式
选择器名称 { 属性名：属性值；属性名：属性值；…….}
|
|
7. 选择器：
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：
a) html标签选择器。
b) class选择器。
c) id选择器。
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
|
|
8. class选择器：
在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。
例：
相同标签设置不同样式的时候，用class进行区分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p>
<p class=”pclass_2”>P标签样式</p>
不同标签进行相同设置的时候，用class进行统一定义。
.classname {color:#00FF00;}
<p class=”classname”>P标签样式</p>
<div class=”classname”>DIV标签样式</div>
|
|
9. id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。
例：
#pid { color:#0000FF;}
<p id=”pid”>P标签样式</p>
注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。
|
|
10. 扩展选择器：
a) 关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
b) 组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
c) 伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
:focus 具有焦点的元素。IE浏览器不支持，在FireFox中可以看到效果。
|
CSS 层叠样式表。
将网页中的样式分离出来，完全由css来控制
增强样式的复用性以及可扩展性。
格式：
选择器{属性名：属性值；属性名：属性值...}
css和html代码相结合的四种方式：
1，每一个html标签都有一个style属性。
2，当页面有多个标签有相同样式时，可以进行复用。
<style>
css代码。
</style>
3，当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个CSS文件。
通过在每个页面中定义
<style>
@import url("1.css");
</style>
4，通过html中head标签中的link标签连接一个css文件。
<link rel="stylesheet" href="1.css" />
技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。
p.css,div.css...
在一个css文件中使用css的import将多个标签样式文件导入。
然后在html页面上，使用linl标签导入这个总的css文件即可。
1.css
@import url("p.css");
@import url("div.css");
<link rel="stylesheet" href="1.css" />
-----------------------
选择器：其实就是样式要作用的标签容器。
当样式分离后，html作用在于用标签封装数据。让后将css加载到指定标签上。
选择器的基本分类：
1，标签选择器：其实就是html中的每一个标签名。
2，类选择器：其实就是每一个标签中的class属性。用 . 的形式表示。
只用来给CSS所使用。可以对不同标签进行相同样式设定。
3，ID选择器：其实就是每一个标签中的ID属性。但是要保证ID唯一性。用 # 来标识。
ID不仅可以被css所使用，还可以被javascript所使用。
选择器优先级。ID>class>标签
扩展选择器：
1，关联选择器：其实就是对标签中的标签进行样式定义。选择器 选择器...
2，组合选择器：对多个选择器进行相同样式定义。将多个选择器通过,隔开的形式。
3，伪元素选择器：其实就是元素的一种状态。
a:link :超链接被点前状态。
a:visited ：超链接点击后状态。
a:hover : 悬停在超链接上 。
a:active : 点击超链接时。
在定义这些状态时，有一个顺序： L V H A
p:first-letter
p:first-line
:focus ：很遗憾，IE6不支持。但FF支持。
CSS滤镜：其实通过一些代码完成丰富了样式。
当使用到CSS的更多属性时，还需要查阅CSS api。
网页设计的时候。div+css.
div:行级区域
span:块级区域。
p：行级区域。p中不要嵌套div。
分享到：
相关推荐
【标题】：“div+css简介及他们之间的关系” 【描述】：“介绍了div+css架构，以及一个函数的用法” 【标签】：“div css” **正文：** `div` 和 `css` 是网页设计和布局中至关重要的技术，它们共同构建了现代...
PostCSS简介与安装"旨在帮助初学者理解并掌握这个现代CSS预处理器的使用。 PostCSS并非一个预处理器，而是一个后处理器，它能够解析CSS代码，应用转换函数，然后输出新的、优化过的CSS。这意味着PostCSS可以支持...
**CSS简介** CSS，全称为Cascading Style Sheets，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的出现弥补了HTML在排版和界面设计上的不足，使得网页设计者可以更加专注于...
**CSS简介** CSS，全称为层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的出现是为了弥补HTML在页面布局和界面设计上的局限性，使得内容...
JSP应用开发-CSS简介 从标题和描述中可以看出，这个资源主要介绍了JSP应用开发中的CSS简介。下面是对标题和描述中所说的知识点的详细解释： 一、CSS简介 CSS（Cascading Style Sheets）是一种层叠样式表语言，...
**CSS简介** CSS，全称为层叠样式表（Cascading Style Sheets），是网页设计中的核心技术之一，用于控制网页元素的样式、布局和呈现。它与HTML（超文本标记语言）一起工作，使得网页不仅有结构，还有吸引人的外观。...
1124css简介.mp4
css简介 简单的ppt
LAMP兄弟连PPT--CSS简介
1-1 css简介.mp4
这个思维导图主要介绍CSS是什么以及它在网页中是如何使用的，在使用中我们又应该注意什么，在这我们对上面的内容做个总结。
#### 一、CSS简介与基础知识 - **CSS定义**：CSS全称为层叠样式表（Cascading Style Sheets），是一种用来描述HTML或XML文档外观及格式的语言。它允许用户控制页面布局、字体、颜色等视觉元素，从而实现内容与表现...
CSS简介** CSS，全称Cascading Style Sheets，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS描述了如何在媒体（如屏幕、打印机）上展示元素。通过使用CSS，我们可以控制...
**CSS简介** CSS，全称层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。通过CSS，我们可以控制网页的布局，改变字体、颜色、大小、间距等视觉表现，...
【CSS和Div+CSS简介】 CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式信息与结构信息分离，使得网页设计更为灵活且易于维护。...
一、CSS简介 1.1 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。然而，HTML变的越来越杂乱且臃肿。于是CSS便诞生了。 1.2 CSS网页的美容...
**一、CSS简介** CSS，全称为层叠样式表（Cascading Style Sheets），是用于控制网页元素样式和布局的一种语言。它与HTML或XML等标记语言配合使用，使网页设计更加灵活、美观。CSS允许将样式规则与内容分离，使得...
#### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小、背景图片等。 ##### CSS能...
一、CSS简介 CSS全称为层叠样式表，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS定义了如何在媒体（如屏幕、打印机）上展示元素。通过使用CSS，我们可以将样式与结构分离...