CSS
css代码在一个独立的文件中,HTML通过link元素引入到页面 link是空元素
快捷键:
注释的快捷键 : ctrl+?
要用多个元素:元素*10(个数)
link+tab
link是元素是引用样式的元素
使用外部样式表的特点:
1.实现了内容结构和表现形式代码分离,方便复用和维护
2.一个css应用到多个html中叫复用。、使用html 代码更加纯净,有利于程序员
3.和搜索引擎的阅读。
使用内部样式表的特点:
1.将css代码写到HTML文档的style元素内容中,在调试的时候可以写在HTML中。
2.没有了样式表文件,在某些时候可以提升效率。
3.多个页面难以共享样式,不利于代码复用
4.不利于搜索引擎阅读
5.在某些对效率要求苛刻或者测试的场景下使用
行内样式表:
javescript操作的是行内样式
在测试场景下使用
三个的权重和优先级:
行内>内部>外部(三个同时作用于一个元素的时候)
css术语
css注释:/注释内容/ 解析时忽略,只是给开发者看的
css规则
css代码由一个一个规则组成
h1{color:red; text-align: center;}这整个代码叫规则。。其中h1:选择器,该样式规则应用到哪些元素上。。。。{color:red;}:声明块
每个规则指定了对哪些元素应用什么样式
元素选择器:标记名{/声明块/}:所有与该标记名匹配的元素,都将应用声明块中的规则
类选择器:.类名{/* 声明块 * /}其中类名是自定义的
例如:其中html中:< h1 class=”F3”> 内容< /h1 > css中:F3{color:red} h1全都使用css中的f3的规则。
ID选择器:#id值{/ * 内容* /} id值为自定义的
属性id为指定值的元素,将应用声明块中的规则
同一个HTML文档中,元素的id值必须唯一
在css中h1{color :red;text-align:center;}其中color:属性名。red:属性值。 html里<h1 class=“F53 " >注意:等号和冒号
语义化
div元素(标记):划分区域的,没有任何含义
语义化结构元素:
< header >头,导航栏或者某个区域的头部,可以多次出现
< nav >用于表示导航栏。
< aside >用于表示跟周围主题相关的附加信息(广告、推广)
< article>用于表示文章或其他可以独立页面存在的内容,可以嵌套
< sectim>用于表示一个整体的一部分主题 多个sectim 组成article
Lorem+单词数量+回车:自动填充文本 乱序铭文
a 标签:< a href=”目标”>内容
其中:href=“目标”:
1.l链接的目标写相对路径和绝对路径
2.锚点:跳转到当前页面的位置,”目标”内写当前页面的ip地址 #+IP地址
3.功能链接:“目标”: tel:15902891170 拨打电话的功能。但是要有条件才能拨打,安装插件
4发送文件:“目标”: mailto:12345@qq.com
< a target=”页面打开的位置” href=“目标”>
其中target=”页面打开的位置”:_blank 新窗口中打开
_self 默认值,在当前窗口打开