您现在的位置是：首页 > 其他

当前栏目

CSS小技能:常用样式属性、选择器分类、盒子模型

属性 CSS 常用模型技能分类样式选择器

2023-06-13 09:11:18 时间

前言

CSS(cascading style sheets,层叠式样式表)是一种用来表现HTML 或XML 等文件样式的计算机语言,CSS文档以.css作为后缀。

1994年，CSS由Hakon Wium Lie与 Bert Bos第一次提出。CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。

一个有具体功能的完整网页，一般由3部分组成：

html：数据和结构 ,HyperText Markup Language，超文本标记语言,其实它就是文本，由浏览器负责将它解析成具体的网页内容

CSS：Cascading Style Sheets层叠样式表

JavaScript：行为交互，效果。JavaScript 是一种符合ECMAScript规范的脚本编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画。

I CSS

CSS的作用：设置HTML页面的布局和样式 CSS的语法： 选择器｛样式属性;样式属性｝

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

在 CSS 中，属性和值都是区分大小写的,每对中的属性和值由冒号 (:) 分隔。CSS 声明块与选择器配对，以生成 CSS 规则集。

1.1 HTML中引入CSS的方式

外部样式，link标签将外部样式表链接到页面。

<link rel="stylesheet" href="styles/style.css">

内部样式是指放在 HTML 文件<head>标签里的<style>标签之中的CSS

<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
</html>
<!--不推荐此方式，因为在一个站点里，在需要更改 CSS 时修需要改每个页面文件。-->

内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。

    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<!--此方式难以维护（在需要更新时，你必须在修改同一个文档的多处地方）-->

注：样式优先级别:内联样式>内部样式>外部样式 根据样式的引入先后顺序，后引入会覆盖前面的样式

1.2 常用样式属性

字体相关属性

1）字体颜色 color:颜色英文单词、#十六进制形式 RGB 如：color:#0099ff 2）字体大小 font-size 3）字体样式 font-style 4）字体 font-family 5）单词间距 word-spacing 6）字符间距 letter-spacing

文本相关属性

1）文本对齐方式 text-align：left/center/right 2）文本与左边界的距离 text-indent 3）文本线条 text-decoration:underline 下划线 overline 上划线 line-through 删除线 none 去掉线条

背景相关属性

1）背景色 background-color:red 2）引入背景图片 background-image:url(...) 3）图片平铺方式 background-repeat:no-repeat 不平铺 repeat-x 在水平方向上平铺 repeat-y 在垂直方向上平铺

边框相关的属性

1） border:线形粗细颜色

   线形：solid实线 、 dotted点线、  double双线 和  dashed虚线

2） border-top:顶层边框 3）border-bottom:底层边框 4）border-left:左边框 5）border-right:右边框

宽度高度属性

width: height:

鼠标相关

cursor:wait 漏斗形pointer(hand) 手指型

显示相关的样式

/*隐藏 */
 display:none  
/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/
display: flex
/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/
display:grid

/**块级盒子, block 将span转换成div */
display:block
/*内联盒子,inline 将div变成span   */
display:inline

超链接

1）a:link{.....} 超链接点击之前的样式设置 2）a:hover{....} 鼠标浮上的样式设置 3）a:active{....} 鼠标点击的样式设置 4）a:visited{....} 访问过后的样式设置

定位相关样式

1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移 2）top:设置上边距 3）left:设置左边距

内外边距

margin: 外边距 padding:内边距

1.3 选择器

我们通过选择器来选中 HTML 文档中的元素，来样式化元素。每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。

选择器的优先级排序:important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

II CSS选择器分类

2.1 基础选择器

选择器	别名	说明	版本
tag	标签选择器	指定类型的标签	1
#id	ID选择器	指定身份的标签	1
.class	类选择器	指定类名的标签	1
*	通配选择器	所有类型的标签	2

       标签名{
         属性:属性值;
      }

      #选择器名字{
         属性:属性值;
     }
     .选择器的名字{
属性:属性值;
      }
      标签名.选择器名字{//只对相对应标签有效果
        属性:属性值;
      }

2.2 层次选择器

选择器	别名	说明	版本
elemP elemC	后代选择器	元素的后代元素	1
elemP>elemC	子代选择器	元素的子代元素	2
elem1+elem2	相邻同胞选择器	元素相邻的同胞元素	2
elem1~elem2	通用同胞选择器	元素后面的同胞元素	3

    标签名1  标签名2{
     属性:属性值；
   }

样式的继承:子标签会继承父标签的样式

例子：+～结合filter实现暗黑模式

2.3 集合选择器

选择器	别名	说明	版本
elem1,elem2	并集选择器	多个指定的元素	1
elem.class	交集选择器	指定类名的元素	1

     标签名,标签名{
         属性:属性值；
     }

2.4 条件选择器

选择器	说明	版本
:lang	指定标记语言的元素	2
:dir()	指定书写方向的元素	4
:has	包含指定元素的元素	4
:is	指定条件的元素	4
:not	非指定条件的元素	4
:where	指定条件的元素	4
:scope	指定元素作为参考点	4
:any-link	所有包含href的链接元素	4
:local-link	所有包含href且属于绝对地址的链接元素	4

2.5 行为选择器

选择器	说明	版本
:active	鼠标激活的元素	1
:hover	鼠标悬浮的元素	1
::selection	鼠标选中的元素	3

/*在鼠标指针悬浮到一个元素上的时候选择这个元素*/
a:hover { }

2.6 状态选择器

选择器	说明	版本
:target	当前锚点的元素	3
:link	未访问的链接元素	1
:visited	已访问的链接元素	1
:focus	输入聚焦的表单元素	2
:required	输入必填的表单元素	3
:valid	输入合法的表单元素	3
:invalid	输入非法的表单元素	3
:in-range	输入范围以内的表单元素	3
:out-of-range	输入范围以外的表单元素	3
:checked	选项选中的表单元素	3
:optional	选项可选的表单元素	3
:enabled	事件启用的表单元素	3
:disabled	事件禁用的表单元素	3
:read-only	只读的表单元素	3
:read-write	可读可写的表单元素	3
:target-within	内部锚点元素处于激活状态的元素	4
:focus-within	内部表单元素处于聚焦状态的元素	4
:focus-visible	输入聚焦的表单元素	4
:blank	输入为空的表单元素	4
:user-invalid	输入合法的表单元素	4
:indeterminate	选项未定的表单元素	4
:placeholder-shown	占位显示的表单元素	4
:current()	浏览中的元素	4
:past()	已浏览的元素	4
:future()	未浏览的元素	4
:playing	开始播放的媒体元素	4
:paused	暂停播放的媒体元素	4

//根据一个有特定值的标签属性是否存在来选择
a[href="https://blog.csdn.net/z929118967?type=blog"] { }

2.7 结构选择器

选择器	说明	版本
:root	文档的根元素	3
:empty	无子元素的元素	3
:first-letter	元素的首字母	1
:first-line	元素的首行	1
:nth-child(n)	元素中指定顺序索引的元素	3
:nth-last-child(n)	元素中指定逆序索引的元素	3
:first-child	元素中为首的元素	2
:last-child	元素中为尾的元素	3
:only-child	父元素仅有该元素的元素	3
:nth-of-type(n)	标签中指定顺序索引的标签	3
:nth-last-of-type(n)	标签中指定逆序索引的标签	3
:first-of-type	标签中为首的标签	3
:last-of-type	标签中为尾标签	3
:only-of-type	父元素仅有该标签的标签	3

2.8 属性选择器

选择器	说明	版本
[attr]	指定属性的元素	2
[attr=val]	属性等于指定值的元素	2
[attr*=val]	属性包含指定值的元素	3
[attr^=val]	属性以指定值开头的元素	3
[attr$=val]	属性以指定值结尾的元素	3
[attr~=val]	属性包含指定值(完整单词)的元素(不推荐使用)	2
[attr\|=val]	属性以指定值(完整单词)开头的元素(不推荐使用)	2

2.9 伪元素

选择器	说明
::before	在元素前插入的内容
::after	在元素后插入的内容

III 盒子模型

一切皆盒子: 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

3.1 块级盒子 (block box) 和内联盒子 (inline box)

块级盒子 (block box) 和内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为：

块级盒子（block）

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

内联盒子 (inline box)

盒子不会产生换行。
width 和 height 属性将不起作用
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

每个盒子都有四个属性：

内容（content）：盒子里装的东西，网页中通常是指文字和图片
填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）：盒子本身
边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

3.2 弹性盒子和Grid 布局

display设置元素的显示模式, 实现页面布局的主要方法是设定display属性的值。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。

/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/
display: flex

/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/
display:grid

/**块级盒子 */
display:block
/*内联盒子*/
display:inline

3.3 定位技术

静态定位 (Static positioning) 是每个元素默认的属性
相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它
绝对定位 (Absolute positioning) 将元素完全从页面的正常布局流 (normal layout flow) 中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的<html>元素边缘固定，或者相对于该元素的最近被定位祖先元素 (nearest positioned ancestor element)。
固定定位 (Fixed positioning) 将一个元素相对浏览器视口(viewport,网页的可视区域)固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位 (Sticky positioning) 让元素先保持和position: static一样的定位，当它的相对视口位置 (offset from the viewport) 达到某一个预设值时，他就会像position: fixed一样定位。

3.4 小知识点

行高常用于设置“垂直居中”
块级标签（inline－block，block）才可以设置宽高，行级标签（inline）的宽高取决于内容
脱离标准流：浮动（float）、绝对定位（Absolute positioning）
如果想相对于父节点进行定位：最好设置父节点的position为relative，原则“子绝父相”。

猜你喜欢

QtforAndroid开发实例教程
简单易懂的MySQL索引修改方法（mysql修改索引）
JQuery在线引用及测试引用是否成功
WPF布局之WrapPanel与StackPanel
深入了解宏和 Linux 系统的基础知识（宏linux）
MySQL新建用户及权限设置（mysql创建一个用户）
存储过程实现(可带查询条件/万能分页/通用)
ORA-01576: The instance string is not enabled ORACLE 报错故障修复远程处理
使用frp实现内网穿透和远程桌面控制
nvm-windows管理nodejs版本神器——代理和镜像配置
AI，让增长变简单：汇量科技官宣朱小强加盟，发布全域营销云产品矩阵「热力引擎」
AlphaGo 的首尔之战带来的启示
CSS学习摘要-浮动与清除浮动详解编程语言
Linux系统管理—linux计划任务和日志的管理
JS 学习笔记 (六) 函数式编程
Premiere Pro 2022 for mac/win(pr)更新字幕转换包

zl程序教程

当前栏目

CSS小技能:常用样式属性、选择器分类、盒子模型

前言

I CSS

1.1 HTML中引入CSS的方式

1.2 常用样式属性

1.3 选择器

II CSS选择器分类

2.1 基础选择器

2.2 层次选择器

2.3 集合选择器

2.4 条件选择器

2.5 行为选择器

2.6 状态选择器

2.7 结构选择器

2.8 属性选择器

2.9 伪元素

III 盒子模型

3.1 块级盒子 (block box) 和内联盒子 (inline box)

3.2 弹性盒子和Grid 布局

3.3 定位技术

3.4 小知识点

相关文章

当前栏目

CSS小技能:常用样式属性、选择器分类、盒子模型

前言

I CSS

1.1 HTML中引入CSS的方式

1.2 常用样式属性

1.3 选择器

II CSS选择器分类

2.1 基础选择器

2.2 层次选择器

2.3 集合选择器

2.4 条件选择器

2.5 行为选择器

2.6 状态选择器

2.7 结构选择器

2.8 属性选择器

2.9 伪元素

III 盒子模型

3.1 块级盒子 (block box) 和 内联盒子 (inline box)

3.2 弹性盒子和Grid 布局

3.3 定位技术

3.4 小知识点

相关文章

3.1 块级盒子 (block box) 和内联盒子 (inline box)