标签：ann   中文   head   asc   统计   搜索   container   标签设置   样式   

CSS选择的艺术介绍

1、 CSS选择的艺术介绍：

HTML是网页制作的一个基础，为了让网页更加美观大方，我们还需要需要学习css来控制网页的外观。

 

HTML、CSS、JavaScript关系

-HTML是网页内容的载体

-CSS样式是表观（外观控制）

-JavaScript是行为,用来实现网也特效效果

 

CSS是什么?

-CSS层叠样式表格（Cascading Style Sheets）

-用于定义HTML内容在浏览器内的显示样式

 

CSS的作用

-CSS简化HTML相关标签，网页体积小，下载快

-解决内容与表现分离的问题

-更好地维护网页，提高工作效率

 

CSS基础语法

1、CSS样式规则：

CSS规则由两部分构成：选择器，声明

*需要改变选择样式的HTML元素由选择器控制

*声明由属性与值构成，后面会加；属性与值之间用：隔开

展示如下表：

 

 

CSS引用：

写在

标签内：

       

               CSS样式…

       

*本身不区分大小写，所有的符号要在英文状态下书写

*每条另起一行便于阅读和维护

*对不同的选择器使用相同的css样式可以使用叠加的写法，例：（p,h1,h2,h3,h4{font-size:30px}）

*css注释：/*注释语句*/

 

2、CSS使用方法

引用css样式的方法：

• ·行内样式（内联样式）

        在开始标签内添加style样式属性

        如：

内容

 

• ·内部样式表（嵌入样式）

        内部样式（嵌入样式），把css样式代码写在:

       

               样式…

       

        *

        *遇到低版本浏览器可能会显示标签内的内容，所以用

 

• ·外部样式表

        外部样式表，把css样式代码写在独立的一个文件中

        扩展名：css文件名.css

        引入外部文件：

        *要放在

标签之间

        *css和html分离

        *多个文件可以使用同一个样式文件

        *多个文件引用同一个css文件，css只需下载一次

 

• ·导入式

        @import “外部css样式”

       

               @import “css.css” /or/ url(css.css);

       

 

 

 

3、CSS使用方法优先级

行会样式>内部样式>外部样式

       *链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

       *最后定义的优先级最高（就近原则）

 

 

CSS选择器

1、 CSS选择器

-标签选择器

        以HTML标签作为选择器

 

-类选择器

        为HTML标签添加class属性

        通过类选择器来作为具有此class属性的元素设置css样式（.XX）

        *只要通过class属性引用类选择器设置的样式，那该标签引用相应样式

        可对不同类型元素的同个名称的类选择器设置不同的样式规则（

/

/ h1.xx{……}）

        同一个元素可以设置多个类，之间有空格隔开（

）

 

-ID选择器

为HTML标签添加ID属性（

）

通过ID选择器来为具有此ID的元素设置css规则（#XX）

 

-全局选择器

所有标签设置样式（*{…}）

 

-群组选择器

        集体统一设置样式（p，h1，h2，h3，h4{font-size:30px}）\（p.xxx,#xxx, h4{font-size:30px}）

 

-后代选择器

 

-伪类选择器

        *定义特殊状态下的样式

        *无法用标签、id、class及其它属性实现

        链接伪类：

        链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态

 

       

 

格式:（ xx:link{}… ）

书写顺序:  :link>:visited>:hover>:active

                 -a:hover必须置于a:link和a:visited之后，才有效

                 -a:active必须置于a:hover之后，才有效

                 -伪类名称对大小写不敏感

*IE6及更早版本，支持元素的4种状态

*IE6浏览器不支持其他元素的:hover和:active

 

 

CSS继承、层叠和优先级

 

1、 CSS继承和层叠

Css继承：从父元素那继承部分css属性，子元素可以继承部分属性

Css层叠：可以定义多个样式，不冲突时可以将多个样式层叠为一个，冲突时按不同样式规则优先级来应用样式

 

2、 CSS优先级

行内样式>内部样式>外部样式

说明：

1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高（就近原则）

      

       Id选择器>class选择器>标签选择器

       同类样式多次引用，样式表中后定义的优先级高

 

       同意样式表中：

1. 权值相同

就近原则（离被设置元素越近优先级越高）

1. 权值不同

根据权值来判断css样式

哪种css样式权值高，就使用哪种样式      

      

       选择器权值：

       -标签选择器：权值为1

       -类选择器和伪类：权值为10

       -ID选择器：权值为100

       -通配符选择器：权值为0

       -行内样式：权值为1000

 

       权值规则

       -统计不同选择器的个数

       -每类选择器的个数乘以相应权值

       -把所有的值相加得出选择器的权值

      

       !important规则

       -可调整样式规则的优先级

       -添加再样式规则之后，中间用空格隔开（div{xx:xxx !important;}）

 

       总结

       -!important声明高

       -css使用方法的优先级

           *行内样式>内部样式>外部样式

           *link链入外部样式和style内部样式优先级、取决于先后顺序

       样式表中优先级

              *id选择器>class选择器>标签选择器>通配符

 

 

CSS应用

1、 CSS样式命名

css样式命名规则

-才用英文字母、数字以及“-”和“_”命名

-以小写字母开头，不能以数字和“-”、“_”开头

-命名形式：单字、连字符，下划线和驼峰（special、mainTitle、main-title、main_title）

-使用又意义的命名

 

1） 页面结构

 

2）导航

 

 

       3)功能

 

 

 

*id不要滥用，谨慎使用

*适当使用class

 

 

字体样式

1、 CSS字体样式

-字体：font-family（font-family:”字体名称”;）

 *含空格字体名和中文，用英文引号（“）括起

 *多个字体，用英文逗号（,）隔开

 *引号嵌套，外使用双引号，内使用单引号

 *字体集：serif和sans-serif区别

 

-文字大小：font-size

  相对

 

 

 

 

 

绝对单位：绝对大小，不能随浏览器分辨率或父元素大小的改变而改变

-px像素

-em/%都是针对父元素

 

-文字颜色：color

-颜色名

-十六进制

-RGB

 

-文字粗细：font-weight

 为元素文字设置粗细

 语法：normal、bold、bolder、lighter、100~900

 

-文字样式font-style

 语法：normal、italic、oblique

 

-字体变形font-variant

 设置元素中文本为小型大写字母

 语法：normal、small-caps（小型大写字母）

 

文本样式

1、 CSS文本样式

text-align：设置元素内文本的水平对齐方式

语法：left、right、center、justify   /*该属性对块级元素设置有效

 

line-height：长度值/百分比

 

vertical-align属性

设置元素内容的垂直方式

语法：baseline、sup、sub、super、top、text-top、middle、bottom、text-bottom

 

Word-spacing：设置元素内单词之间间距

Letter-spacing：设置元素内字母之间间距

 

CSS选择的医术与文本样式

标签：ann   中文   head   asc   统计   搜索   container   标签设置   样式   

原文地址：https://www.cnblogs.com/KafuuYama/p/13386911.html