其他分享
首页 > 其他分享> > CSS选择的医术与文本样式

CSS选择的医术与文本样式

作者：互联网

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元素由选择器控制

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

展示如下表：

 

h1

{color:red;font-size:14px;}

选择器

样式分隔符/属性:(:隔开属性和值)值;(;隔开声明)/属性:值;样式分隔符

 

CSS引用：

写在<head></head>标签内：

        <style type=”text/css”>

               CSS样式…

        </style>

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

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

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

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

 

2、CSS使用方法

引用css样式的方法：

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

        如：<p style=”color:red;”>内容</p>

 

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

        <style type=”text/css”>

               样式…

        </style>

        *<style>要放在<head>标签之间

        *遇到低版本浏览器可能会显示标签内的内容，所以用<!--样式-->

 

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

        扩展名：css文件名.css

        引入外部文件：<link href=”XX.css” rel=”stylesheet” type=”text/css” />

        *<link>要放在<head>标签之间

        *css和html分离

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

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

 

        @import “外部css样式”

        <style>

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

        </style>

 

类别

引入方法

位置

加载

行内样式

开始标签内style

Html文件内

同时

内部样式

<head>中<style>内

Html文件内

同时

链入外部样式

<head>中<link>引用

*css样式文件

*与html文件分离

页面加载时，同时加载css样式

导入式@import

在样式代码最开始出

**css样式文件

*与html文件分离

在读取完html文件之后加载

 

 

3、CSS使用方法优先级

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

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

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

 

 

CSS选择器

1、 CSS选择器

-标签选择器

        以HTML标签作为选择器

 

-类选择器

        为HTML标签添加class属性

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

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

        可对不同类型元素的同个名称的类选择器设置不同的样式规则（<h1 class=“xx”> / <p class=”xx” >/ h1.xx{……}）

        同一个元素可以设置多个类，之间有空格隔开（<p class=“xxx xxx”>）

 

-ID选择器

为HTML标签添加ID属性（<p id=”xx”>）

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

 

-全局选择器

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

 

-群组选择器

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

 

-后代选择器

 

-伪类选择器

        *定义特殊状态下的样式

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

        链接伪类：

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

 

       

伪类

说明

:link

未访问的链接

:visited

已访问的链接

:hover

鼠标的悬停状态

:active

激活的链接

 

格式:（ xx:link{}… ）

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

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

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

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

*IE6及更早版本，支持<a>元素的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） 页面结构

页面结构

页头

header

页面主体

main

页尾

footer

内容

content/container

容器

container

导航

nav

侧栏

sidebar

栏目

column

页面外围控制

wrapper

左右中

left right center

 

2）导航

 

导航

导航

nav

主导航

mainnav

子导航

subnav

顶导航

topnav

边导航

sidebar

左导航

leftsidebar

右导航

rightsidebar

菜单

menu

子菜单

submenu

标题

title

摘要

summary

 

       3)功能

 

功能

标志

logo

广告

banner

登录

login

登陆条

loginbar

注册

register

搜索

search

功能区

shop

标题

title

 

 

*id不要滥用，谨慎使用

*适当使用class

 

 

字体样式

1、 CSS字体样式

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

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

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

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

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

 

-文字大小：font-size

  相对

 

 

属性值

说明

In

Inch，英寸

1英寸=2.45厘米

Cm

厘米

1厘米=0.394英寸

Mm

毫米

1毫米=0.1厘米

Pt

磅，印刷的点数

72磅=1英寸

 

 

属性值

CCS2缩放系数1.2

xx-small

9px

x-small

11px

small

13px

medium

16px

large

19px

x-large

23px

xx-large

28px

 

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

-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,文本,医术,选择器,CSS
来源： https://www.cnblogs.com/KafuuYama/p/13386911.html