CSS基础

nicepainkiller 2020-05-11

[目录]

目录

一、CSS基础介绍

  1. CSS层叠样式表(Cascading Style Sheet):用于定义HTML内容在浏览器内的显示样式
  2. 特点:
    • CSS简化HTML相关标签,网页体积小,下载快
    • 解决内容与表现分离的问题
    • 更好的维护网页,提高工作效率

二、CSS基础语法

  1. CSS样式规则:CSS规则由两部分构成:选择器,声明
  2. CSS引用
<style type="text/css"><!--写在<<head></head>标签内-->
    css样式
</style>
  1. CSS注释:/注释语句/

三、CSS的使用方法

  1. 引用CSS样式的方法
    • 行内样式(内联样式):在开始标签内添加style样式属性,如:<p style="color:res;">内容</p>
    • 内部样式表(嵌入样式):把CSS样式代码写在style样式中,如:<style type="text/css">样式</style>
    • 外部样式表:把CSS样式代码写在独立的一个文件中,扩展名.css,引入外部文件,<link href="xx.css" rel="stylesheet" type="text/css"/>,要放到标签内
    • 导入式:@import“外部CSS样式”
  2. CSS使用方法区别
属性
位置
加载
行内样式开始标签stylehtml文件内同时
内部样式<head>中<style>内html文件内同时
链入外部样式<head>中<link>引用.css样式文件.html文件分离页面加载时,同时加载CSS样式
导入式@import在样式代码最开始处.css样式文件与.html文件分离在读取完html文件之后加载
  1. 使用链入外部样式的好处
    • CSS和html分离
    • 多个文件可以使用同一个样式文件
    • 多文件引用同一个CSS文件,CSS只需要下载一次
  2. CSS使用方法优先级


    行内样式 > 内部样式 > 外部样式
  • 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
  • 最后定义的优先级最高(就近原则)
  1. CSS优先级规则
  • 同一样式表中:
    • 权值相同:就近原则(离被设置元素越近优先级越高)
    • 权值不同:根据权值来判断CSS样式,哪种CSS样式权值高就使用哪种样式
  1. 选择器权值
    • 标签选择器:权值为1
    • 类选择器和伪类:权值为10
    • ID选择器:权值为100
    • 通配符选择器:权值为0
    • 行内样式:权值为1000
  2. 权值规则
    • 统计不同选择器的个数
    • 每类选择器的个数乘以相应权值
    • 把所有的值相加得出选择器的权值
  3. !import规则


    可调整样式规则的优先级,添加在样式规则之后,中间用空格隔开

四、CSS选择器

  1. 标签选择器:以HTML标签作为选择器
  2. 类选择器:为HTML标签添加class属性,通过类选择器来为具有此class属性的元素设置CSS样式,可对不同类型元素的同一个名称的类选择器设置不同的样式规则,同一个元素可以设置多个类,之间有空格隔开
  3. ID选择器:为HTML标签添加ID属性,通过ID选择器来为具有此ID的元素设置CSS规则
  4. 群组选择器:集体统一设置样式
  5. 全局选择器:所有标签设置样式
  6. 后代选择器:使用后代选择器设置,之间用空格隔开
  7. 伪类:伪类伪类选择器定义特殊状态下的样式,无法用标签id,class及其它属性
伪类
:link未访问的链接
:visited已访问链接
:hover鼠标悬停状态
:active激活的链接
  • 伪类:hover和:active兼容
    • IE6及更早版本支持<a>元素的4种状态
    • IE6浏览器不支持其他元素的:hover和:acitve
  • 链接伪类的顺序


    :link > :visited > :hover > :active
    • a:hover必须置于a:link和a:visited之后才有效
    • a:active必须置于a:hover之后,才有效
    • 伪类名称对大小写不敏感

五、CSS继承和层叠

  1. CSS继承:从父元素那继承部分CSS属性
  2. 继承的好处:父元素设置样式,子元素可以继承部分属性,减少CSS代码
  3. CSS层叠
    • 可以定义多个样式
    • 不冲突时,多个样式可层叠为一个
    • 冲突时,按不同样式规则优先级来应用样式

六、CSS样式命名规则

  • 采用英文字母、数字以及“-”和“_”命名
  • 以小写字母开头,不能以数字和“-”、“_”开头
  • 命名形式:单字,连字符,下划线和驼峰
  • 使用有意义命名

常用的CSS样式命名

  • 页面结构
页头:header    导航:nav   页面主体:main  侧栏:sidebar   页尾:footer
栏目:column    内容:content/container     页面外围控制:wrapper
容器:container 左中右:left、right、center
  • 导航
导航:nav   左导航:leftsidebar 主导航:mainnav 右导航:rightsidebar
子导航:subnav  菜单:menu  订导航:topnav  子菜单:submenu
边导航:sidebar 标题:title 摘要:summary
  • 功能
标志:logo  注册:register  广告:banner    搜索:search
登录:login 功能区:shop    登录条:loginbar    标题:title

相关推荐

aSuncat / 0评论 2020-08-18