码迷,mamicode.com
首页 > Web开发 > 详细

css引用与html语义化

时间:2018-08-12 14:02:55      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:导航栏   div   代码   target   inpu   tab   开始   描述   int   

一。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语义化

标签:导航栏   div   代码   target   inpu   tab   开始   描述   int   

原文地址:https://www.cnblogs.com/1301774939-/p/1301774939-.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!