03CSS基础

[目录]

目录

一、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使用方法区别
属性
值
位置
加载
行内样式 开始标签style html文件内 同时
内部样式 <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
posted @ 2020-05-11 23:06  a_哆肉  阅读(140)  评论(0)  编辑  收藏  举报