html标签全局属性:所有html标签都可以用的属性
< div data-index="div1"
contenteditable hidden
accesskey="x" id="password"
tabindex="1" class="a1 b1 c1 s-c-a_3">
test1
</div>
1. title元素的附加说明，鼠标悬浮在元素上面，会出现提示内容
2.data-*给元素设置自定义数据，主要给js用的。（给div元素自定义一个index的数据，数据值是div1）
3.contenteditable把元素变为可编辑状态，允许用户修改元素的内容。
4. hidden隐藏html元素
5. tabindex 可以修改元素按tab键自动获取焦点的顺序(值是数字，可以有负数)，默认所有元素的tableindex=0，tableindex一样的时候是顺序获取。
6. accesskey指定网页元素获取焦点的快捷键(键盘的单个字符串)，alt + 按键。
7. id元素的唯一标识(一个网页里面id的属性值是唯一的),主要用于js查询元素，锚点，for关联元素。
8. class类(设置元素的类别)
可以重名,可以把不同的元素分类,相同的class代表属于同一类
可以有多个class属性值，多个值用空格分开
id和class的命名规则:
以字母开头(小写字母),可以包含数字，字母，-，_的组合。
命名要有一定的语义,方便通过属性值了解html元素描述的内容。
9. style写css样式的。属性值就是层叠样式表语法。
css介绍
css是Cascading Style Sheet的缩写，中文"层叠 样式表"，是一种标准的样式表语言，主要用于描 述网页的表现形式(样式: 如网页的颜色，字体大 小，元素位置等等)
1994年，哈坤-利提出的css，1996年css1.0发 布，1998年发布css2.0，2004年发布css2.1版本，1999年开始准备的css3.0 并模块化，以后逐 步完善各模块，到2010年完善了大部分模块。
浏览器调试样式的方式：
css语法
网页布局
-
table 是早期的网页布局方案，由于table结构比较复杂，特别是复杂网页，浏览器渲染需要耗费 较多资源和时间。现在不能table做网页布局，一 般用于数据展示。
-
为了提高网页渲染速度，css2.1的时代流行的是 div + css布局。
-
h5 语义化的标签+css3布局，现在w3c提倡的规范布局。
css样式语法“样式名:样式值;”,很多的样式就可以控制元素复杂的显示效果
引入css样式的方式
1.内嵌样式(行内样式)： 直接将css样式语言作为 style属性值，写在html标签里 面。
<div style="background-color:rgb(113, 80, 80);color:red;">div1</div>
缺点: 1. 需要在每个style属性里面写样式，不方便维护和编写。
2. 样式不能复用,冗余的样式代码太多，造 成html体积增大。
优点: 由于样式和html在一起，网页构建的时候 直接能读取样式，渲染网页速度较快。
2.内嵌样式: 将样式信息嵌入<style>标签里面。 style标签是属于head标签的子元素。
<style>
.style1{background-color:rgb(113, 80, 80); color:blue;}
</style>
. 代表class，这是选择class="style1"的标签，给它对应的样式。
3. 外部样式(主流推荐): 把css样式写在单独的. css样式文件里面，通过link标签引入外面的css样式文件。
优点: 可以减少冗余的样式，可以多个文件引入 样式，维护和编写方便，主流的样式编写方案。
缺点: 需要额外加载css样式文件，相对比直接在 html的样式渲染要慢一些(渲染速度差距一般是ms级别，所以可以不用考虑这一点。)
link 标签可以将当前网页和外部文件资源关联在一起，通常放在head标签里面。常见用于引入css样式文件。
rel 必填属性，当前文件和外部资源直接的关系，如果stylesheet加载一个样式表
href 必填，外部文件的地址，可以是本地路径或 者网络地址。
type 加载外部文件的类型，可以省略。
4. @import 导入外部样式,与link标签比较类似。
/* @import url("./css01.css"); */
@import"./css01.css";
@import 导入外部样式,与link标签比较类似。
可以加url 或者省略url，导入的外部样式后面必须加 ;
必须在第一行导入,可以导入多个样式文件。
link 标签引入的样式，在html加载的同时可以加载css样式
@import 引入样式，会等当前文件加载完成再去导入文件，如果css文件比较大，可能会出现网页加载完成没有样式。
css选择器:css选择html元素的特定语法。
css的标准语法结构
选择器: 由html的元素的id,class属性或元素名称以及一些特殊符号构成，用来指定html元素的样式。 【属性:样式的名称，值:样式具体显示的效果 】
类选择器: . 选择class属性的标签 .style1{}
elements 选择器(元素选择或者叫标签选择)，可以直接选择指定的标签给样式。
/* 选择网页的所有p元素 */
p{
color: green;
}
伪类选择器: 选择器后面有:开头，伪类选择器是特定的选择，不同的伪类选择器有不同的功能。
/* 未访问的链接(没点击过的链接) */
a:link{
color: green;
}
/* 用户已访问过的链接(已点击过的) */
a:visited{
color: bisque;
}
/* 鼠标移入元素 */
a:hover{
color: brown;
}
/* 鼠标点击的时刻 */
a:active{
color: black;
}
/* 获取焦点的伪类选择器 */
input:focus{
color: red;
}
/* 选择网页中第一个子元素是div的元素(第一个元素并且是div元素) */
div:first-child{
color: aquamarine;
}
/* 选择网页中最后一个子元素是div的元素(最后一个元素，并且是div元素) */
div:last-child{
color: blueviolet;
}
后代选择器: ，可以在选择后期添加选择器，选择对应的后端元素。后代选择器以空格区分。后代选择器可以是任意选择器。
/* 选择box1元素下面的所有p元素 */
.box1 p{
color: blue;
}
/* 选择box1元素下面的所有p元素下面的所有span元素 */
.box1 p span{
color: red;
}
/* 选择box1 下面的 .p1(p1类选择器) */
.box1 .p1{
color: brown;
}
/* 选择.box1 下面的元素中第一个元素是p的元素 */
.box1 p:last-child{
color: cadetblue;
}
后端选择器是有使用范围限制的,后代选择器的限制范围看空格前面的选择器
.colora 选择器的使用范围是.box3 */
box3 .colora{
color: blueviolet;
}
colora 只能在box3选择的元素上使用 */
.box3.colora{
color: blueviolet;
}
id选择器: #是表示id选择,选择id属性。(这里是 选择id属性值为div1的元素),尽量少用甚至不用
#div1{
color: red;
}
分组选择器,可以把样式相同的选择器编为一 组，用逗号区分,任意选择器都可以分组
div1,p1和span选择器的样式相同
.diva,.p1,span{
color: green;
}
属性选择器,可以选择指定属性的元素(和属性值没有关系)
选择网页中带有title属性的元素
[title]{
border:1px solid red;
}
/* 可以给属性选择器添加其他选择器限制范围 *//* 选择含有title属性的p元素 */p[title]{background-color: blue;}/* 可以选择具体属性值的元素 *//* 选择name属性值为uid的元素 */[name="uid"]{border: 1px solid green;}/* 根据部分属性值选择 *//* 选择class属性值中包含有div1的元素 */[class~="div1"]{background-color: aquamarine;}/* ^属性值以某个字符开头的元素 *//* 选择以class属性值以p字符的元素 */[class^="p"]{background-color: brown;}/* 选择class属性值以3结尾的元素 */[class$="3"]{background-color: black;}/* 选择class属性包含3的元素 */[class*="v"]{background-color:blueviolet;}
> 子元素选择(父元素下面的第一层元素就是子元素)
/* 选择box元素下面的div子元素 */
.box > div{
border: 1px solid red;
}
+ 兄弟选择器(相邻元素选择器),紧挨着某个元素后面的第一个元素
/* 选择li1元素后面的第一个li元素(如果后面的第一个元素不是li元素则不符合) */
.li1 + li{
color: red;
}
伪元素选择器:可以向某些选择器设置特殊效果,主 要是选择特定的元素
css2.1版本的伪元素和伪类都是冒号，不好区分。为了区分这两种选择器，css3规定伪元素用::::first-line 和 ::first-letter 只能作用于块级元素1. ::first-line 选择元素中文本的第一行box::first-line{color: blue;}2. ::first-letter 设置首字母样式.box::first-letter{font-size: 22px;}3. ::before 在指定元素包裹的内容前面插入元素box::before{/* content 属性必须要设置，其内容就是元素显示的内容 */content:"*"; color: red;}4. ::after 在指定元素包裹的内容的后面插入元素.box::after{content: "-----"; color: blueviolet;}
* 通配符选择器(选择所有元素)
扫一扫
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
