美文网首页
css语法,块与内联and多种选择器

css语法,块与内联and多种选择器

作者: 关键先生耶 | 来源:发表于2018-06-03 14:28 被阅读164次

样式表:

内部样式,不推荐使用.png 内部样式表.png

推荐使用第二种内部样式表。第二种内部样式表,简便,少写代码提高工作效率。


外部样式表.png

外部样式表,提高编写效率,复用style.css文件。注意路径问题。

css注释

在head总使用


css注释.png

块与内联:

块元素:独占一行。如:div (可使一行文字拥有属于自己的颜色背景),p ,h1~h6等。
内联元素:只占自身大小,不会单独占一行。
区分块元素跟内联元素:看是否独占一行了。


a标签.png

a标签可以包含任何元素,除了本身。
p标签不可以包含其他块元素。块元素:div等。

选择器:

元素选择器:让所有p元素的文字变红,让所有h1元素的文字变红。

元素选择器.png

id选择器:通过元素属性,选择改变元素。

改变id为p1的元素的字体。p1前必须加上''#''


id选择器.png

类选择器:必须满足条件才可改变。

类选择器.jpg
例: 类选择器.png
类选择器效果.png

指定背景颜色:

指定背景颜色.png

并集选择器:(同指定背景颜色作用相同)

并集选择器.png

交集选择器: (复合选择器)必须满足两个条件才可以改变。

交集选择器1.jpg 交集选择器2.png

子元素选择器: 子元素and后代元素选择器.jpg

后代2.png
后代3.png

伪类选择器:

link 访问过的链接。visited访问过的链接。hover鼠标移入的状态。active被点击的状态

伪类1.png 伪类2.png
注意.jpg

伪元素:

伪元素:first-line设置第一行背景。写法跟first-letter写法相同。 伪元素.jpg

属性选择器: 属性选择器.png

指定开头:加"^”即可


指定开头.png
指定末尾:加$即可 指定末尾.jpg
指定全部:加*即可 指定全部.png

子元素选择器:写法:nth-child(索引)

子元素选择器.jpg

兄弟选择器:

span和p元素改变

兄弟1span和p改变.jpg

span后的所有的改变:


span后所有都.png

否定伪类选择器:

否定hollow的段落.png

样式继承: div里的p和span会继承div的样式

注意:背景,边框,定位不继承。

继承选择器优先级: 继承优先级.png

a的伪类:顺序为link,visited,hover,active(l,v,h,a)

a的伪类.png

相关文章

  • css语法,块与内联and多种选择器

    样式表: 推荐使用第二种内部样式表。第二种内部样式表,简便,少写代码提高工作效率。 外部样式表,提高编写效率,复用...

  • HTML-02.day

    1.css选择器基本语法 (选择器 声明块) 2.外部样式 3.块和内联 4.选择器 5.子元素和后代元素选...

  • 前端笔记(2)

    一.代码:(1)css样式 (2)css语法 (3)开发工具 (4)块和内联 (5)常用的选择器 (6)子元素和后...

  • CSS

    CSS基础 CSS如何工作什么是DOMcss的三种引入方式(外部、内部、内联) CSS语法 选择器元素选择器类选择...

  • css选择器

    css最实用的五种选择器: 元素选择器 id选择器 后代选择器 群组选择器 块与内联: 块元素:独占一行。如:di...

  • HTML-02day

    1、a的伪装 2、内联样式 3、内联样式表 4、CSS语法 5、选择器 6、常用选择器 7、否定伪装 8、复合选择...

  • day02

    A今日所学 一、HTML标签的分类 二、让内联标签与内联块标签居中的两种方法 三、CSS选择器 四、选择器的优先级...

  • CSS学习

    CSS新增了box-sizing属性 块级元素(block) 内联元素(inline) position 选择器的优先级

  • HTML // CSS

    HTML常用标签 CSS 样式与选择器 快捷语法

  • day01 html 与 css 的含义 + 常用标签 + 常用

    html 与 css 的含义 html语法结构 常用标签 css修饰语法 css常用样式 常用选择器以级优先级

网友评论

      本文标题:css语法,块与内联and多种选择器

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