day03(标签+css选择器)

标签的分类

1.1 块标签

h1 ,p,ul,li,dl,dt,dd,
特点:独占一行,能设置width,height

1.2 内联标签

a ,span,i,em,strong
特点:并排显示,不能设置width,height   不能设置margin-top,margin-bottom

1.3 内联块

input,img,button
特点:1.并排显示,设置width,height
  • 内联元素和内联块元素 块标签转化
display:block;块标签默认值;
display:inline;内联标签默认值;
display:inline-block;内联块标签默认;
想转化成什么就加纳个默认值;

不改变内联和内联块的属性,实现水平居中

父级{
text-align:content;
}

css选择器
定义:选定你所要改变的元素的一种方式。

2.1分类

 (1).css元素选择器
文档的元素就是最基本的选择器
p{color:pink}
 (2).class选择器
.test{color:yellow}
(3).id选择器
#first{color:blue}
 (4).分组选择器
p,h4{background:gray}
(5).后代选择器
div>span{} //选取div所有子元素为span的标签
(6).兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7).伪类选择器
div:hover{}
input:focus{}
(8).伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''
}
(9).属性选择
div[class='test']{}

2.2选择器的优先级别排序

<div class='test' id='first'>hello world</div>
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}

问题

1下划线

text-decoration:none underline overline

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天是2018年7月11日 1.盒子模型的传参 盒子模型中需要给top/bottom/left/right值。 2...
    鱼翅大魔王阅读 361评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 一.css样式中的属性 1.1.盒子模型的传参 margin传递的参数:1——传递两个参数,先上下后左右;2——传...
    雪落殇晨阅读 312评论 0 1
  • 今天学到了什么 1.盒子模型的传参(margin与padding 相同) 2.标签的分类 2.1 块标签 2.2 ...
    努力进化阅读 248评论 0 1
  • 1.盒子模型 1.1盒子模型的传参 1.2 PADDING 2.HTML标签的分类 2.1块标签 h1,p,div...
    idiot_teresa阅读 178评论 0 0