ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2021-01-13

2021-01-13 23:57:52  阅读:15  来源: 互联网

标签:13 01 样式 标签 元素 行内 2021 选择器 css


CSS入门篇

Cascading Style Sheets,层叠样式表。 css也是标记语言设置HTML页面中的文本内容,图片的外形以及版面的排版显示。

分类:
1.行内css
将一个标签的样式直接写在这个标签元素的开头标签中,以标签的style属性开始书写其样式规则。
<标签 style=“样式1:样式值1;样式2:样式值2;…”></标签>

2.内部css
在html文件内部,标准位置在head标签中title标签下面,先写一个style标签,
然后在style标签内书写这个html的样式规则。

html
<style>  选择器{
           样式1:样式值1
       }
       <style>
  1. 外部CSS

    专门创建一个CSS文件,然后在这个CSS文件中书写CSS样式规则,然后在需要使用这个样式的HTML文件中的head标签内部的title标签下面,使用link标签引用这个CSS文件

    css
    选择器{
    样式1:样式值1;
    样式2:样式值2;

    }
    html

<link rel="stylesheet" href="css文件路径"/>

总结

三种样式均可正常使用
控制范围:外部css>内部css>行内css
使用场景:工作(外部css),学习(内部css)。

选择器

常用的选择器有;
标签选择器:
直接使用标签的名称作为选择器进行使用,可以使用标签选择器选择一个HTML中的所有该标签。
…css
标签名{
样式内容
}
类选择器:
类是指分类,将具有相同样式的标签先全部划分为一类,给所有这类标签使用class属性设置同一个类名,然后在css里面使用.类名作为选择器。
…css
.类名{
… 样式内容
}
id选择器:
给某个标签设置一个Id属性,然后在CSS中使用#Id名作为选择器。注意,因为同一个html文件中所有标签Id的唯一性,导致Id选择器只能控制一个标签的样式,和行内标签作用类似。
…css
Id名{
… 样式内容
}
伪类选择器:
lvha,这四个伪类如果要全部使用,顺序不能乱

  1. link:超链接未被点击
  2. visited:超链接被点击之后
  3. hover:鼠标悬停在其上的时候
  4. active:鼠标点下的时候

CSS元素

显示模式;元素(标签)以什么方式在浏览器内显示,浏览器对标签的默认显示方式。
在HTML学习中我们知道标签分为两种:“单标签” “双标签”。
标签的两种显示方式:一种独占一整行、还有一种只占内容本身。

元素的分类
根据元素的显示形式将标签元素划分为两类:

  1. 以div为代表的,块级元素,这类标签默认占一整行
  2. 以span为代表的,行内元素,这类标签由内容决定大小

块级元素特点;

  1. 每个块级元素独占一行
  2. 可以设置宽和高,可以设置内外边距
  3. 内部可以嵌套任何元素
  4. 不设置宽度默认占父容器的100%

行内元素特点;

  1. 相邻的行内元素在一行,一行可以显示多个
  2. 高,宽度直接设置无效的
  3. 行内元素只能容纳文本或者其他的行内元素
  4. 不设置宽度默认占内容的宽度

行内块元素特点;

  1. 和相邻的行内元素(行内块)在一行上,但是他们之间空白的缝隙,一行显示多个
  2. 默认宽度是内容的宽度(行内元素的特点)
  3. 高度,行高,边距以内边距都可以控制 (块元素的特点)

元素类型转换;
display属性进行元素类型转换

  1. none:隐藏该元素
  2. block:将元素转为块元素或显示元素
  3. inline:将元素转为行内块元素
  4. inline-block:将元素转为行内块元素.

css三大特征

一、层叠性
相同选择器给设置相同的样式,这样的话后面的样式会覆盖(层叠)先前的样式,层叠性能够解决标签的样式冲突问题
层叠性的原则:

  1. 样式属性冲突:遵循就近原则,哪个样式距离结构近,就执行哪个
  2. 样式属性不冲突,不会层叠。

二、继承性
CSS中的继承:子标签会继承父标签的某些样式属性,如:文本颜色,文字大小等
子元素虽然没有设置某些样式属性,但是其父元素拥有这些样式属性,会导致子元素也拥有了这些样式属性的特征。

三、优先级

当同一个元素指定了多个选择器,就会产生优先级的问题

  1. 选择器相同,则执行层叠操作
  2. 选择器不相同,则计算权重之后根据权重进行执行。

标签:13,01,样式,标签,元素,行内,2021,选择器,css
来源: https://blog.csdn.net/weixin_48460655/article/details/112596819

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有