一。CSS引用
1. 使用外部样式表:    CSS代码在一个独立的文件中,HTML通过link元素引入到页面

格式:link + tab键<link rel="stylesheet" herf"../目标">

特点:
- 实现了内容结构和表现形式的代码分离,方便复用和维护
- 使HTML代码更加纯洁,有利于程序员和搜索擎的阅读

2.使用内部样式表:   将CSS代码写到HTML文档的style元素内容中

格式:<stely>样式</stely>

特点:
没有了样式表文件,在某些时候可以提升效率;
多个页面难以共享样式,不利于代码复用;
HTML和CSS代码混乱,不利于程序员和搜索擎阅读,不利于复用和维护;
在某些对效率要求苛刻或测试的场景下使用

一个样式表可以引用多个页面,一个页面也可以引用多个样式表

3.使用行内样式表:又叫内嵌样式表,CSS代码写在某个元素的开始标记中,行内样式不写选择器(放入body标签里)

书写格式:<开始标签 属性名=“属性值”>        <结束标签>

特点:相对于使用内部样式表,行内样式表大多进行JS操作,同时也在测试的场景下使用
注意:行内样式表优先级最高
CSS术语
     CSS注释书写格式:  /*注释内容*/
作用:   方便自己和维护员修护  描述代码功能  解析CSS
CSS的规则:
css代码由一个一个的规则组成  
 
         书写格式:选择器  { 声明块 }
选择器:该样式规则应用到哪些元素上
声明块:有哪些样式

元素选择器:  标签元素名
 
书写格式:{ /* 声明块 */ }
所有与该标记名匹配的元素,都将应用声明诀中的规则

类选择器:

书写格式:.类名{/* 声明块 */}
所有class属性为指定类名的元素,都将应用声明诀中的规则;多个类名在HTML代码中,中间要用空格分开

ID选择器:

书写格式:#id值{/* 声明块 */}
在同一个HTML文档中,元素的id值必须唯一

二。HTML 语义化概述
意义:HTML中不同的元素代表不同的含义;使用具有含义的元素来书写HTML文档,即语义化;语义化属于HTML范畴,与样式css无关

作用:有利于浏览器理解HTML文档;有利于搜索擎理解HTML文档结构的理解;
div元素:用来划分区域,不具备任何意义
<header>:用于表示某个页面的头部,同一个页面header可以出现多次
<nav>:导航栏
<aside>:用于表示跟周围主题相关的附加信息(侧边栏)
<article>:用于表示文章或独立页面存在的内容
<section>:用于表示一个整体部分的主题
<footer>:脚部
单词快捷键:lorem+tab键
< a >超链接

书写格式:< a href="目标"> 内容 </ a>
或<a target="页面打开位置" href="目标">  内容  </ a>
链接的目标指:页面地址(路径);锚点;功能的链接

target="页面打开位置"是指:点击后在哪里打开新文档
_blank新窗口打开
_self默认值 当前窗口打开
注意:属性名小写,属性值加双引号

css引用与html语义化的更多相关文章

  1. CSS代码命名惯例语义化的方法

    CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...

  2. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  3. 一天搞定HTML----标签语义化04

    根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签 标签语义化作用: 代码演示 通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化 注意: 标签语义化,不仅仅只是指使 ...

  4. 语义化标签和media媒体查询可以放心使用

    现在的高级浏览器都支持html5,只有IE6-IE8不支持.(下面说的IE均值IE6-IE8) 有两个特性在IE是可以使用的: 1.语义化标签: header(头部) section(区块) foot ...

  5. .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 你应该了解的CSS语义化命名方式及常用命名规则

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  7. CSS语义化命名

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  8. 智能选择器和语义化的CSS

    本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...

  9. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

随机推荐

  1. Python游戏编程入门

    <Python游戏编程入门>这些文章负责整理在这本书中的知识点.注意事项和课后习题的尝试实现.并且对每一个章节给出的最终实例进行分析和注释. 初识pygame:pie游戏pygame游戏库 ...

  2. Office DCOM 组件交互权限设置

    这里以 WORD 为例: 运行 mmc -32 打开控制台. 点击 文件 -> 添加/删除管理单元 ,在 可用的管理单元 中选择 组件服务 ,然后点击 添加 , 确定 . 展开 组件服务节 点直 ...

  3. visual编译通过后,debug报错找不到*.dll

    解决: 在debug目录下放入*.dll

  4. php rsa

    <?php $res=openssl_pkey_new(); // Get private key $ok = openssl_pkey_export($res, $privkey); // G ...

  5. Antd-Pro2.0版本如何修改代理,让Mock变为真实服务器接口

    Antd-pro2.0之前更改代理方式 更改.roadhogrc.mock.js export default { 'GET /api/*': 'http://localhost:8001/', 'P ...

  6. IBase<T>

    public interface IBase<T>//基类 { IEnumerable<T> SelectAll();//查询所有 T FindById(int ID);//根 ...

  7. C++_day8_ 多重继承、钻石继承和虚继承

    1.继承的复习 1.1 类型转换 编译器认为访问范围缩小是安全的. 1.2 子类的构造与析构 子类中对基类构造函数初始化只能写在初始化表里,不能写在函数体中. 阻断继承. 1.3 子类的拷贝构造与拷贝 ...

  8. APP测试常见点

    1. 生成APK文件在真机上可以安装和卸载(安装卸载测试) 2. 第三方手机助手上面可以安装和卸载(安装卸载测试) 3. 启动APP 4. 验证数字签名.升级后可以正常使用.在线跨版本升级(在线升级测 ...

  9. Confluence 6 升级完成后的检查

    这个页面中的文章将会为 Confluence 管理员为 Confluence 升级完成后 提供检查列表以确保 Confluence 的升级顺利完成.这个检查列表没有包含所有需要检查的错误,但是将会检查 ...

  10. Activiti流程变量五步曲 ——by fightingKing

    http://blog.csdn.net/zwk626542417/article/details/46648139 一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这 ...