a:超链接标签 <a href="" target="" title="">内容</a> href如果不写,点击内容只会刷新页面,
1. href 写跳转地址,如果跳转网站,前面写协议,<a href="https://www.baidu.com"></a>,也可以放图片地址,点击之后页面就是该图片。
没有点击超链接时,a 标签内字体颜色为蓝色,点击完之后为字体变成紫色。
2.target写跳转到的网页具体位置
默认值为:_self 跳转到当前页面,跳转的网页覆盖原先网页
其他值:_blank 跳转到新窗口,跳转的网页在新窗口打开,原先网页不受影响
在head 里有个单标签 <base target=""> 统筹规划网页跳转的,也是_self _blank 两种值,
3.锚点(a标签与其它标签:# 与 id a标签 与 a 标签:#与name,跳转到顶部按钮),
1.<a href="#eminem">my idol</a>
<p id="eminem">时光匆匆 不由我</p>
2.<a href="#eminem"></a>
<a href="" name="eminem"></a>
4.title 起提示作用,鼠标放上去会显示titl里的信息内容。
<p style="color:blue"></p> 行内样式会使代码显得臃肿,不利于维护,可以使用内部样式,开发中不会使用内部样式而是外部样式,外部样式是在外部建个css文件然后供引用,引用方式是在head里使用link 标签(单)<link rel="stylesheet" href="">,外部css 文件不用写style,且注意外部css 文件头部 写:@charset "utf-8";注意尾部写分号,防止乱码内部样式存放在head 标签里的style标签里面,样式由 选择器{属性:属性值;} 决定
写在标签里 叫标签属性,写在{}中是css属性,属性值结束用;
css 注释方式 /*123*/,
css 为什么叫层叠样式表,因为如果声明同一种标签元素内部同类样式,后面的会覆盖前面的,且还存在优先级问题,优先级高的覆盖优先级低的。
<style>
p{color:red;} /*p 是选择器*/
p{color:blue} /*后面覆盖前面的*/
</style>
<head>
<style>
/*
p{
color:red;
background-color:black;
}
*/
<link rel="stylesheet" href=""> //rel 是文件类型
</style>
</head>
选择器:(命名必须 “见名知意”,只能用合理的英文,特殊字符也不行,要以英文小写开头,可以使用数字,box-1,不要使用下划线_,,还有驼峰命名,boxStart,第二个单词首字母大写,js常用驼峰命名,不要使用广告词汇 如 ad ,以防浏览器当垃圾过滤)
使用选择器规范:网页部分大盒子用id ,内部的小盒子用class
1.标签选择器 eg: p{}
2.id 选择器,id 唯一,不能声明相同的id, 用#
#abc{
color:red;
}
<p id="box"></p>
3.类选择器,class 名字可重复,且可以有多个类名,会对相同类名的标签都产生作用,用.
.box{
color:red;
}
<p class="box box1"></p>
<p class="box"></p>
4. * 会选中全部标签
选择器优先级:选择范围越小,优先级越高。id>class>tagname. 如果控制相同标签的相同属性,优先级高的覆盖优先级低的。行内样式优先级>高于内部样式=外部样式。
组合选择器:p span{} 后代选择器 指的是p的后代span,p 与span 间可以有其他标签
p>span{} 子元素选择器 指的是p 的儿子 span,p 与span 间没其他标签
p + span 毗邻元素选择器,选中p 的兄弟 span,,选中p元素后面紧挨着的一个兄弟标签span,只会选中1
p + p{} /*会选中到 2 4 5*/(选中的p 上面必须要有一个p)
/*1 /*2
<p></p> <p>,</p>
<span></span>/*1*/ <p>2</p>
<span></span>/*2*/ <a href="">
<p>3</p>
<p>4</p>
<p>5</p>
p ~ span{} 兄弟元素选择器 会选中所有p 的兄弟,1中会选中 2 与 3
p,span{},组合选择器,p 与 span 没关系,分别控制声明同类样式
*/
*/