美文网首页
day03(标签+css选择器)

day03(标签+css选择器)

作者: 很普通的人 | 来源:发表于2018-07-11 20:37 被阅读0次

标签的分类

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

相关文章

  • 初识CSS ①选择器

    1、标签选择器 标签选择器其实就是html代码中的标签。 选择器{ css样式代码; } 下图的css样式代码的作...

  • day003_css基础

    css 标签选择器 id选择器 类选择器(开发使用) css 链接方式 1、内嵌式(head标签内...

  • Python -day-21常用标签及CSS

    一、表单标签 二、空白标签 三、认识CSS 四、CSS选择器 五、伪类选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • HTML和CSS

    表单标签 表单标签(下拉菜单和多行文本域) 空白标签 认识css css选择器 伪类选择器

  • CSS

    CSS基本语法结构 eg: style标签 标签选择器HTML标签作为标签选择器的名称 … 、 、 类选择器<标签...

  • css学习笔记

    一、基础选择器 标签选择器:标签名 { css属性名:属性值; } 类选择器:.类名 { css属性名:属性值; ...

  • CSS 选择器 & CSS3选择器

    1、CSS 选择器 1.1 、CSS基础选择器 标签选择器:所有标签名都可以当做选择器,比如body、h1、dl、...

  • 选择器的种类有哪些?每一种都是怎么用的?它们的优先级是怎样的?

    一 . CSS基础选择器与用法 1 . CSS选择器的作用 选择器其实就是选择标签用的 2 . 标签选择器 是指用...

网友评论

      本文标题:day03(标签+css选择器)

      本文链接:https://www.haomeiwen.com/subject/hlzcpftx.html