二、CSS知识总结(上篇)

举报
毛利 发表于 2021/07/15 08:32:14 2021/07/15
【摘要】 @Author:Runsen 文章目录 什么是csscss的格式css 三种写法选择器标签选择器id选择器类选择器后代选择器子元素选择器交集选择器兄弟选择器序选择器同级别的第几个 同类型的第几个属性选择器通配符选择器 文字样式规定文字样式的属性规定文字粗细的属性规定文字大小的属性规定文字字体的属性 文本样式文本装饰的属性文本水平对齐的属性文本缩进的...

@Author:Runsen

什么是css

层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

css的格式

<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; ... }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意点:

  1. style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
  2. style标签中的type属性其实可以不用写, 默认就是type=“text/css”
  3. 设置样式时必须按照固定的格式来设置. key: value;其中:不能省略,分号大多数情况下也不能省略

css 三种写法

  1. head头部写入
  2. 直接在标签写style
  3. 新建css文件在通过link标签导入

选择器

标签选择器

标签名称{ 属性:值;
}

  
 
  • 1
  • 2
  • 3

id选择器

#id名称{ 属性:值;
}

  
 
  • 1
  • 2
  • 3

类选择器

.类名{ 属性:值;
}

  
 
  • 1
  • 2
  • 3

id相当于人的身份证不可以重复 class相当于人的名称可以重复

后代选择器

标签名称1 标签名称2{ 属性:值;
}

  
 
  • 1
  • 2
  • 3

后代选择器必须用空格隔开

后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

子元素选择器

标签名称1>标签名称2{ 属性:值;
}

  
 
  • 1
  • 2
  • 3

子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格

后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号

后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中 | 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

交集选择器

选择器1选择器2{ 属性: 值;
}  # 用多个选择器

  
 
  • 1
  • 2
  • 3
  1. 并集选择器
选择器1,选择器2{ 属性:值;
}  #选到2个

  
 
  • 1
  • 2
  • 3

并集选择器必须使用,来连接

兄弟选择器

相邻兄弟选择器
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
选择器1+选择器2{ 属性:值;
}

通用兄弟选择器
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
选择器1~选择器2{ 属性:值;
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

序选择器

同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

属性选择器

input[type=password]{}

根据指定的属性名称找到对应的标签, 然后设置属性

p[class=cc]{ color: blue; }

  
 
  • 1
  • 2
  • 3

通配符选择器

*{ color: red; }

  
 
  • 1
  • 2
  • 3

文字样式

规定文字样式的属性

格式:font-style: italic;

取值:
normal : 正常的, 默认就是正常的
italic : 倾斜的

快捷键:
fs font-style: italic;
fsn font-style: normal;

规定文字粗细的属性

格式: font-weight: bold;

单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线, 默认就是细线
数字取值:
100-900之间整百的数字

快捷键:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

规定文字大小的属性

格式:font-size: 30px;

单位:px(像素 pixel)

注意点: 通过font-size设置大小一定要带单位, 也就是一定要写px

快捷键fz font-size:;``fz30 font-size: 30px;

规定文字字体的属性

格式:font-family:"楷体";

注意点:

  • 如果取值是中文, 需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里面已经安装的字体

快捷键
ff font-family:;

文本样式

文本装饰的属性

格式:text-decoration: underline;

取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

快捷键:
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

文本水平对齐的属性

格式: text-align: right;

取值:
left 左
right 右
center 中

快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;

文本缩进的属性

格式: text-indent: 2em;

取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽

快捷键
ti text-indent:;
ti2e text-indent: 2em;

颜色属性

在CSS中如何通过color属性来修改文字颜色

格式: color: 值;

取值:

  • 英文单词
    一般情况下常见的颜色都有对应的英文单词,

  • rgb
    rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

    格式: rgb(0,0,0)

    这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

    红色: rgb(255,0,0);
    绿色: rgb(0,255,0);
    蓝色: rgb(0,0,255);
    黑色: rgb(0,0,0);
    白色: rgb(255,255,255);

    红色/绿色/蓝色的值都一样就是灰色
    而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
    例如: color: rgb(200,200,200);

  • rgba
    rgba中的rgb和前面讲解的一样, 只不过多了一个a
    那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明

    例如: color: rgba(255,0,0,0.2);

  • 十六进制
    在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
    十六进制中是通过每两位表示一个颜色
    例如: #FFEE00 FF表示R EE表示G 00表示B`

css中三大特性

继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:

  • 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
  • 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  • 继承性中的特殊性
    • a标签的文字颜色和下划线是不能继承的
    • h标签的文字大小是不能继承的
案例
<head>
<style> div{ color: red; text-decoration: none; font-size: 30px; }
</style>
</head>
<body>
<div> <p>我是段落</p>
</div>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

层叠性

作用: 层叠性就是CSS处理冲突的一种能力

<head>
<style> p{ color: red; } .para{ color: blue; }
</style>
</head>
<body>
<p id="identity" class="para">我是段落</p> #蓝色
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

  • 优先级判断的三种方式

    • 间接选中就是指继承

    如果是间接选中, 那么就是谁离目标标签比较近就听谁的

    • 相同选择器(直接选中)

    如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

    • 不同选择器(直接选中)

    如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠id>类>标签>通配符>继承>浏览器默认

补充内容

优先级之important

用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

  • !important前面的感叹号不能省略
  • !important必须写在属性值得分号前面
*{ color: blue !important; font-size:10px; }

  
 
  • 1
  • 2
  • 3
  • 4

优先级的权重

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

  • 首先先计算选择器中有多少个id, id多的选择器优先级最高
  • 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
  • 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

标签理解

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

什么是div?

  • 作用: 一般用于配合css完成网页的基本布局

什么是span?

  • 作用: 一般用于配合css修改网页中的一些局部信息

div和span有什么区别?

  • div会单独的占领一行,而span不会单独占领一行
  • div是一个容器级的标签, 而span是一个文本级的标签

容器级的标签和文本级的标签的区别?

  • 容器级的标签中可以嵌套其它所有的标签
  • 文本级的标签中只能嵌套文字/图片/超链接

容器级的标签
div h ul ol dl li dt dd ...

文本级的标签
span p buis strong em ins del ...

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

  1. 什么是块级元素, 什么是行内元素?
  • 块级元素会独占一行
  • 行内元素不会独占一行

容器级的标签
div h ul ol dl li dt dd ...

文本级的标签
span p buis stong em ins del ...

块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del

  1. 块级元素和行内元素的区别?
  • 块级元素
    独占一行

    • 如果没有设置宽度, 那么默认和父元素一样宽
    • 如果设置了宽高, 那么就按照设置的来显示
  • 行内元素
    不会独占一行

    • 如果没有设置宽度, 那么默认和内容一样宽
    • 行内元素是不可以设置宽度和高度的
  1. 行内块级元素

为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

  1. display取值
    block 块级
    inline 行内
    inline-block 行内块级

5.快捷键
di display: inline;

db display: block;
dib display: inline-block;

背景

背景颜色

在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的

快捷键:
bc background-color: #fff;

背景图片

在CSS中有一个叫做background-image: url();的属性,

快捷键:
bi background-image: url();

背景平铺

在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的

取值:

  • repeat 默认, 在水平和垂直都需要平铺
  • no-repeat 在水平和垂直都不需要平铺
  • repeat-x 只在水平方向平铺
  • repeat-y 只在垂直方向平铺

快捷键
bgr background-repeat:

背景定位

在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置

取值

水平方向: left center right

垂直方向: top center ``bottom

具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的

快捷键:
bp background-position: 0 0;

背景属性缩写

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

快捷键:
bg+ background: #fff url() 0 0 no-repeat;

<style> div{ /* background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; background-position: left bottom; */ /*background: red url(images/girl.jpg) no-repeat left bottom;*/ } body{ background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-attachment: scroll;*/ background-attachment:fixed; }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

背景图片和插入图片区别

  • 背景图片仅仅是一个装饰, 不会占用位置
  • 插入图片会占用位置
  • 背景图片有定位属性, 所以可以很方便的控制图片的位置
  • 插入图片没有定位属性, 所有控制图片的位置不太方便

文章来源: maoli.blog.csdn.net,作者:刘润森!,版权归原作者所有,如需转载,请联系作者。

原文链接:maoli.blog.csdn.net/article/details/88605496

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。