HTML+CSS 学习笔记 03
一.a元素的相关知识
1.1. a元素的作用
-
定义超链接,用于打开新的url,如: 百度
-
点击链接可以打开对应的页面:<a href="https://www.baidu.com">点我打开百度</a>
1.2 a元素的常用属性
- href: Hypertext Reference的简称,用于指向网络资源的地址
- target: 打开URL的方式
1.3 target的取值
- _self : 在当前页面打开URL,这是默认值
- _blank:在新标签页打开URL
- _parent: 有iframe时,在父框架中打开URL
- top:有frame时,在顶层框架中打开URL
1.4 a元素的用途
-
可用作锚点链接
- 可以做返回顶部的功能
-
伪链接
-
点击链接时并不想去新的URL,只是想干其他的事
<a href="javascript:void(0)">伪链接1</a> <a href="javascript:alert('hello world')">伪链接2</a>-
所以有时可以把链接当成按钮来使用
-
-
图片链接:
-
将图片和a一起使用,点击一张图片可以跳转到其他的页面,这在网页中是很常见的
<a href="https://www.baidu,com"> <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_redBlue-0a7c20fcaa.png" alt=""> </a>
-
-
a元素除了跳转到新网页之外,还可以
-
下载资源
<a href="https://github.com/xxxx/yyyy/master.zip">点我下载xxx</a>
-
发送邮件
<a href="mailto:123456@gmail.com">点我发送邮件</a>
-
二.标签语义化
2.1 什么是标签语义化?
- 选择标签的时候要尽量让每一个标签具有正确的语义
- 虽然很多标签都可以相互实现,但是还是要尊重标签语义化的规则
2.2 标签语义化的好处?
- 方便代码维护
- 减少开发者的沟通成本
- 能够让语音合成工具正确识别网页的用于,一遍正确的做出反应
- 有利于让搜索引擎正确的识别
三. 认识CSS
3.1 CSS简史
3.1.1 什么是CSS?
- CSS的作用是:可以给网页中每一个元素设置样式(化妆),让网页更精美,美化网页
- CSS的全称是: cascading sheet(层叠样式表)
3.1,2 CSS简史
- CSS1.0=>CSS2.0=>CSS2.1=>CSS2.2
- CSS3: CSS3是对CSS2.x以后的某些模块进行更新升级后的称呼,目前并没有真正意义上的CSS3
3.1.3 CSS官方文档
-
由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的
-
可以到https://caniuse.com/查询CSS属性的可用性
3.2 基本概念
3.2.1 CSS样式的书写格式:
- 属性名1:属性值:1;属性名2:属性值2;......
- color:red;background-color:red;
3.2.2 如何将CSS样式应用在元素上?
-
内联样式(inline-style):
<span style="font-size:32px;color:red;">我是渣渣辉</span>
-
文档样式表(document stylesheet)
-
写在style标签里
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档样式表/内部样式表</title> <style type="text/css"> *{ margin:0; padding:0; } span{ font-size:32px; color:red; } </style> </head> <body> <span>我是渣渣辉</span> </body> </html>
-
-
外部样式表(external stylesheet)
-
将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档样式表/内部样式表</title> <link rel="stylesheet" href="./css/base.css" type="text/css"> </head> <body> <span>我是渣渣辉</span> </body> </html>
-
可以在style元素或者CSS文件中使用@import导入其他的CSS文件,但是不推荐使用,因为效率比较低
<style> @import "./base.css"; span{ color;red; } </style>
-
- ```css
- /*base.css*/
@charset "utf-8";
@import "./common.css";
span{
font-size:32px;
color:red;
}
```
3.3 基本选择器
3.3.1 选择器的定义
- 按照一定的规则选出元素,并为其添加CSS样式
3.3.2 选择期的分类
-
通配符选择器（universal selector）
-
元素选择器（type selectors）
-
类选择器（class selectors）
-
id选择器（id selectors）
-
属性选择器（attribute selectors）
-
组合（combinators）
-
伪类（pseudo-classes）
-
伪元素（pseudo-elements)
3.3.3 通配符选择器
-
作用:选择所有的样式,为其添加样式
-
应用场景:一般给网站做一些样式重置的工作,如清除内外边距等,效率比较低,不推荐使用
<!doctype html> <html lang="en"> <head> <style> /*通配符选择器*/ * { margin:0; padding:0; color:red; } </style> </head> <body> <div>我是div</div> <p>我是p</p> <span></span> </body> </html>
3.3.4 元素选择器(标签选择器)
-
选择同一元素设置样式
<!doctype html> <html lang="en"> <head> <style> /*元素选择器/标签选择器*/ div { color:red; } p { color:yellow; } span { color:green; } </style> </head> <body> <div>我是div</div> <p>我是p</p> <span></span> </body> </html>
3.3.5 类选择器
-
根据class属性的值选择元素,设置样式
<!doctype html> <html lang="en"> <head> <style> /*类选择器*/ .one { font-size:100px; } .two { color:red; } </style> </head> <body> <div class="one">我是div</div> <p class="two">我是p</p> <span class="one two"></span> </body> </html>-
class的注意点
- 一个元素可以有多个class值,多个值之间用空格隔开
- class值由多个单词组成时,可以用中划线,下划线,驼峰标识,推荐使用中划线
- 不要使用标签名作为class的值
3.3.6 ID选择器
-
根据id属性的值选择元素,设置样式
<!doctype html> <html lang="en"> <head> <style> /*ID选择器*/ #one{ color:red; } </style> </head> <body> <div id="one">文字内容1</div> <p id="two">文字内容2</p> <span id="three">文字内容3</span> <strong id="four">文字内容4</strong> </body> </html>-
id的注意点
- 一个HTML文档中id值不可以重复
- id值由多个单词组成时,可以用中划线,下划线,驼峰标识,推荐使用中划线
- 不要使用标签名作为id的值
3.4 常用的CSS属性
3.4.1 color 前景色(文字颜色,装饰线,外轮廓,边框等)
3.4.2 background-color:背景颜色
3.4.3 font-size:文字大小
3.4.4 width: 宽度
3.4.5 height : 高度
3.5 颜色的表示方法
3.5.1 颜色的表示方法
-
基本颜色关键字:red,green,yellow,blue....上百个关键词
-
rgb颜色:rgb(r,g,b)
- r:0-255
- g:0-255
- b:0-255
-
rgba(r,g,b,a)
- r:0-255
- g:0-255
- b:0-255
- a:0-1(0完全透明,1 完全不透明)
-
十六进制表示法:#rrggbb,#rgb等
-
总结:常用十六进制表示颜色
