首页 技术 正文
技术 2022年11月11日
0 收藏 813 点赞 2,322 浏览 1220 个字

一。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默认值 当前窗口打开
注意:属性名小写,属性值加双引号

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,490
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,905
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,738
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,491
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,129
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,292