概述
目录
- 五类CSS选择器
- 简单选择器
- 组合器选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
- 插入css样式的方法
- 优先级排序
- 具体代码
- 注释
- 颜色
- 颜色名
- rgb
- hex
- hsl
- 背景
- 边框
- 样式
- 宽度
- 圆角
- 边距
- 内外边距
- 合并外边距
- 宽高
- 轮廓
- 文本
- 字体
- 图标
- 链接
- 列表
- display
- block 元素
- inline 元素
- 区别与联系
- 布局
- 位置
- overflow
- 浮动和清除
- 透明度
- 透明悬停效果
五类CSS选择器
简单选择器
根据名称、id、类来选取元素，类名、id名不能以数字开头
[标签名]+[.#*]
.: 类选择
#: id选择
*: 全部选择
,: 作为一个组都被选择
p.center: 选择class=center 的p
p#center: 选择id=center 的p
p*: 选择所有p标签，设置其为该样式，该样式优先级最低
p, h: 选择p, h标签
典例
h, p.m2;
h, p,.m2;
h.m2, p.m2;
h, p .m2;
h, p#m2;
h, p*;
h, p, *;
......
组合器选择器
根据它们之间的特定关系来选取元素
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
伪类选择器
伪类用于定义元素的特殊状态, 不同状态不同样式，根据特定状态选取元素。
标签 + : + 伪类名
div : hover 悬停状态的div
div : lang 不同语言定义不同规则
伪元素选择器
选取元素的一部分并设置其样式
标签 + :: + 伪类名
div :: first-letter div首字母
div :: first-line div首行
属性选择器
根据属性或属性值来选取元素
-
标签 + [attribute=“value”]
p[class=class_name]=p.class_name
p[id=id_name]=p.id_name
div[color=“red”] 颜色为red的div
div[font-family=“黑体”] 字体为黑体的div -
标签 + [attribute~=“value”]
选择属性名中含有value的标签
-
标签 + [attribute|=“value”]
-
标签 + [attribute^=“value”]
-
标签 + [attribute$=“value”]
-
标签 + [attribute*=“value”]
插入css样式的方法
优先级排序
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 浏览器默认样式
具体代码
- 外部
<link rel="stylesheet" type="text/css" href="mystyle.css"> - 内部
<style> div{} </style> - 标签内
<div style="color=redbackground-color=blue"> </div>
注释
/*这是css注释*/
<!-- 这是html注释 -->
颜色
颜色名
color: red
rgb
(255, 0, 0)
hex
#ff0000
hsl
…
背景
- background-color
- background-image
background-image: url("*.png"); - background-repeat
沿水平或竖直方向平铺图像
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat; - background-attachment
指定滚动界面背景是否移动
background-attachment: fixed;
background-attachment: scroll; - background-position
background-position: right top; - opacity(不透明度)
- backkground
简写，要按顺序
background: red url("*.png") right top;
边框
样式
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
border-style: dotted solid double dashed;
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）-
基本单位以 px、pt、cm、em 计
-
预设值: thin、medium、thick
border-width: 10px 20px 30px thin;
圆角
border-radius 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
border-radius: 5px 2px 8px 10px;
边距
内外边距
外边距可简写为
margin: 5px 2px 8px 10px;
- margin-top
- margin-right
- margin-bottom
- margin-left
- auto
- inherit 继承自父类元素
内边距可简写为
padding: 5px 2px 8px 10px;
- padding-top
- padding-right
- padding-bottom
- padding-left
值可为
- px等像素单位
- auto
- inherit 继承自父类元素
合并外边距
具体见
宽高
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
max-height, min-height；max-width, min-width
可设置如下值:
- auto 默认浏览器计算高度和宽度。
- length 以 px、cm 等定义高度/宽度。
- % 以包含块的百分比定义高度/宽度。
- initial 将高度/宽度设置为默认值。
- inherit 从其父值继承高度/宽度。
轮廓
outline, 轮廓与边框不同！轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
- outline-style: 同border-style
- outline-color
- outline-width: 同border-width
- outline-offset: 在元素的轮廓与边框之间添加空间, 元素及其轮廓之间的空间是透明的。
- outline
文本
- background-color
- color
- text-align: center, justify, top, right…
- direction
- unicode-bidi
- vertical-align: 设置元素的垂直对齐方式。
- text-decoration 装饰, 值: none, overline, underline…
- text-transform 属性用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。
text-transform: lowercase; text-transform: capitalize; text-transform: uppercase;
间距
- text-indent 指定文本第一行的缩进
- letter-spacing 指定文本中字符之间的间距
- line-height 指定行之间的间距
- word-spacing 指定文本中单词之间的间距
- white-space 指定元素内部空白的处理方式
字体
- font-family: “Times New Roman”, Times, serif;
- font-style 属性主要用于指定斜体文本。
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少） - font-weight
bold, normal - font-size
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
可以使用这个公式从像素到 em 来计算大小：pixels/16=em。
%, px
图标
<i class=...> </i>
- Font Awesome 图标
<script src="https://kit.fontawesome.com/yourcode.js"></script> - Bootstrap 图标
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> - Google 图标
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
链接
<a><a>
- a:link 正常的，未访问的链接
- a:visited 用户访问过的链接
- a:hover 用户将鼠标悬停在链接上时
- a:active 链接被点击时
列表
无序 <ul> </ul>
有序 <ol> </ol>
- list-style-type 属性指定列表项标记的类型, circle, square,
删除标记/项目符号
list-style-type: none; padding: 0px; margin: 0px; - list-style-image 属性指定列表项标记为一个图像
- list-style-position
- border 表格边框
- border-collapse: collapse; 合并边框
Tips:- 在 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
- 为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：
tr:nth-child(even) {background-color: #f2f2f2;} - overflow-x:auto, 数据过长时自动生成滑动条
display
block 元素
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
inline 元素
<span>
<a>
<img>
区别与联系
inline, 不完整展示内外编剧，不换行
block, 完整展示内外边距，但是会自动换行
inline-block, 完整展示内外边距，不换行
Tips:
- 原本是inline元素设置display为block后会导致换行
- display: none, visibility:hidden, 都可以隐藏元素，前者不占用空间，后者占用空间
布局
位置
position
- z-index 属性指定元素的堆栈顺序, 元素是否可叠加
overflow
指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
- visible 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden 溢出被剪裁，其余内容将不可见
- scroll 溢出被剪裁，同时添加滚动条以查看其余内容-
- auto 与 scroll 类似，但仅在必要时添加滚动条
浮动和清除
(类似word文档)的浮动, float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
- left 元素浮动到其容器的左侧
- right 元素浮动在其容器的右侧
- none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit 元素继承其父级的 float 值
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
- none 允许两侧都有浮动元素。默认值
- left 左侧不允许浮动元素
- right 右侧不允许浮动元素
- both 左侧或右侧均不允许浮动元素
- inherit 元素继承其父级的 clear 值
Tips:
使用该种技术用于并排- box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
透明度
- opacity: 0.3; 设置所有子元素都继承该透明度
- rgba(red, green, blue, alpha); 设置所有子元素都继承该透明度
透明悬停效果
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
参考文献
https://www.w3school.com.cn/css/css_specificity.asp
最后
以上就是耍酷大米为你收集整理的CSS样式初级入门教程——持续更新五类CSS选择器插入css样式的方法注释颜色背景边框边距宽高轮廓文本字体图标链接列表display布局透明度的全部内容，希望文章能够帮你解决CSS样式初级入门教程——持续更新五类CSS选择器插入css样式的方法注释颜色背景边框边距宽高轮廓文本字体图标链接列表display布局透明度所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复