首页 > 其他分享> 文章详细

css笔记

2022-02-27 15:32:24 阅读：201 来源： 互联网

标签：样式 text 元素笔记 color 选择器 css 属性

title: CSS相关笔记
author: 小崔
categories: 前端
tags:

CSS
note
date: 2022-02-25 18:43:19

1. CSS术语

属性（如：color、background-color）
值（多指数字）
关键字（css 中的关键单词⽐如 center）
属性值（值+关键词+功能符如：1px solid rgb(0,0,0)）
声明（属性加属性值 color：red；）
功能符（函数）
声明块{}
⻓度单位⽐如：px、pt、em、rem、vw、vh、%、deg、s、ms 等
规则集
- 不换⾏换⾏均可以，但建议换⾏更清晰
- 如果数值为 0 可以不写单位，其他必须写
- ⼀个样式声明列表中最后⼀个样式值可以不写分号其他必须写
- 多个{}之间不写分号
选择器（⽤来选择⽬标元素的特定或者指定名字）

2. 选择器

【注意】相同的选择器不同的属性声明，不会被覆盖⽽是共同应⽤。

1. 通用选择器

*号，选择 html ⽂件内所有的元素 * {样式声明}
最常⽤的⽤法是 *{margin:0;padding:0} 清除浏览器的内外边距。但它的缺陷是所有的元素不论是否有内外边距都会被渲染

2. 元素选择器

通过标签的名字来选择 html 元素，权重值为 1，⽐如： div {样式声明}
弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

3. id选择器

给标签的前半部分增加⼀个属性 id 这个属性可以指定⼀个唯⼀的不重复的值，权重值 100
<div id="abc">⼀个标签</div>
#abc {样式声明}
id 名不能以数字开头，不建议使⽤中⽂命名，尽量⻅名知意
多个单词连接可以⽤- 、_、驼峰
每个都有和其他重复的样式，使⽤ id 有⼏个弊端，过于订制化导致每⼀个元素都要有⾃⼰的 id 有⼀套⾃⼰的样式，
代码量过⼤重复性过⼤。明明有重复的内容，但通过 id 选择器只能是⼀个⼀个的书写其样式，⼜不是很智能

4. 类选择器【重要】

类选择器先要使⽤标签的 class 属性赋值，类选择器的权重值 10
<div class="abc">⼀个标签</div>
.xxx {样式声明}
类名不能以数字开头，不建议使⽤中⽂命名，尽量⻅名知意，多个单词连接可以⽤- 、_、驼峰
⼀个元素可以创建多个类名，每个类名之间⽤空格分开
⼀个标签
易错点：
- 忘记给元素增加 id 或者 class 属性就直接开始写 css 样式
- class 的点，很容易忽略那个点
- 先写类名还是先定义 class 属性

5. 群组选择器

多个选择器名⽤逗号连接，可以⼀起完成共同样式的指定 div,p,span {color: red;}
群组选择器并不是只能使⽤相同类型的选择器，可以是各种选择器⼀起参与 #mydiv,.b,h4 {color: blue;}

6. 关系选择器

1. 后代选择器

先代元素（祖先）选择器写在前⾯，之后写⼀个空格，空格后写后代元素选择器。
祖先元素后代元素 {样式声明}
需要注意的是空格不要忘记，祖先元素不⼀定是⽗级和祖⽗级还可以再往上的级别都是可以的
但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续⽤空格加⼊更深层的后代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.d1 .d2-1 div{
            color: red;
        }
    </style>
</head>
<body>
    <div class="d1">爷爷
        <div class="d2-1">老大
            <div class="d3-1">老大家1</div>
            <div class="d3-2">老大家1</div>
        </div>
        <div class="d2-2">老二</div>
    </div>
</body>
</html>

2. 子代选择器

可以选中某个元素的直接⼦元素，与后代不同的是⼦代选择器的范围更⼩。
⽗级元素 > ⼦级元素 {样式声明}
层级可以向后代选择器⼀样延申,区别就是⼦代是>连接,后代是空格连接 .baba > div > div {字体颜⾊;}

3. 兄弟选择器

同⼀层的关系选择器，可以选中该元素后⾯的兄弟元素。
某元素选择器 ~ 该元素后⾯的所有兄弟 {样式声明}
需要注意的是兄弟选择器可以选到该元素后⾯的兄弟，⽽选不到自己和自己之前的。
兄元素 ~ 弟元素, 如果弟弟有名字(属性), 就会选中有名字的弟弟

4. 相邻兄弟选择器

同⼀层的关系选择器，可以选中参照的元素后⾯紧挨着被参照元素的选择器。
某元素选择器 + 该元素后⾯的唯⼀相邻的兄弟 {样式声明}

需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的⼀个兄弟

<style>
    .one + li{
        color: red;
    }
</style>
/*必须是紧紧挨着的*/
<ol>
    <li class="one">刘备</li>
    <li>关羽</li>
    <li class="zf">张飞</li>
    <li>赵云</li>
</ol>

7. 伪类选择器

伪类选择器的作⽤是匹配同⼀个元素，不同状态下的样式
选择器:伪类 {样式声明}
a:link {样式声明} 没有被打开之前，或者没被打开过（ a标签特有）
a:visited {样式声明} 访问过后（ a标签特有）
div:hover {样式声明} ⿏标悬停
p:active {样式声明} 点击激活
input:focus {} 属性代表 input 标签获取焦点的样式( <input/> 标签的属性)
input:cheaked {} 属性代表 input 单选、复选等 type 类型被选中后的样式( <input/> 标签的属性)

8. 伪元素选择器

CSS 伪元素⽤于设置元素的“指定部分”的样式
:before 表示元素最前边的部分，紧随着标签的部分
:after 表示元素的最后边的部分，紧随着标签的部分
:before{content:""}:after{content:""} content 必须写
两个冒号 ( :: ) ⽽不是⼀个冒号 ( : )，这是 CSS3 规范中的⼀部分要求，⽬的是为了区分伪类和伪元素。⼤多数浏览器都⽀持这两种表示⽅式。

3. 选择器权重【牢记】

选择器	权重
元素选择器	1
id选择器	100
类选择器	10

4. CSS优先级

1. 优先级原则

顺序读取的优先级：是相同类型选择器采⽤顺序读取后来的优先(就近原则)
选择器的优先级：不同类型选择器，按照权重原则采⽤(id 选择器 100,类选择器 10,元素选择器 1)
继承的优先级：指定样式的优先级⼤于继承样式的优先级
多个选择器⼀起使⽤的时候：根据权重值累加⽐较值后采⽤优先级
最⾼优先级：!important，直接获取最⾼优先级，内联样式不能加!important

2. 优先级的比重大小

按 CSS 引⼊⽅式分: 内联样式 > 内部样式 > 外部样式 （但要注意外部样式引⽤要在内部样式下⾯，才会低于内部样式的优先级）
按元素分: id选择器（100） > 类选择器（10） > 元素选择器（1)

5. 尺寸单位

em是相对单位，它相对于父级的大小而改变自己的倍数。1em就是父级的一倍，2em就是父级的两倍

rem相对单位，它相对的是根元素（html）而改变自己的倍数，1rem就是根元素的一倍（就是不变），2rem就是根元素的2倍

pc端不要轻易给高度写成百分百格式

6. 边框

1. 边框的属性、

border-width 边框宽度
border-style 边框样式，solid 实线，dashed 虚线，dotted 点点
border-color 边框颜⾊

2. 边框的方向

border-bottom 下边框
border-top 上边框
border-left 左边框
border-right 右边框

3. 边框的简写方式

border:30px solid green; 三个位置分别可以写边框宽度、边框样式边框颜⾊，没有严格要求书值都写顺序。

4. 小三角形制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d3 {
            width: 0;
            height: 0;
            /*尖朝下*/
            border: 100px solid transparent;
            border-top-color: red;
        }
    </style>
</head>
<body>
<!--三角形-->
<div class="d3"></div>
</body>
</html>

7. 元素的分类

1. 元素的显示属性

display 元素以什么⽅式显示(以下为常⽤显示⽅式)
display: block; 以块级元素⽅式显示
display: inline; 以内联元素⽅式显示
display: inline-block; 属于⾏内元素，但以块级显示，俗称⾏内块
display: none; 不显示，在页面上完全没有这个元素展示了，连位置都没有留下，但是标签依然存在，还能依靠display: block显示回来
display: table; 以 table ⽅式显示

坑：解决行内块幽灵空白节点

幽灵空白节点

解决方法：

方法1: 让父元素的字号为0
方法2: 让子元素变成块级元素, 因为幽灵空白节点只有行内块元素才有

2. 内联元素

内联元素也可以叫⾏内元素
设置宽度⾼度⽆效（⾏内块级显示元素除外）
如果父元素有多余空间时和其他内联元素横向从左向右排列，如果父元素空间不足时,才会换行显示
设置上下内、外边距⽆效
行内元素换行会出现空格
常⻅的⾏内元素 span a 等

3. 块级元素※※※※※

每个元素都⾃占⼀⾏(是父元素的100%)，后⾯的元素也只能另起⼀⾏
在父元素中从上往下排列
元素的宽度、⾼度以及内外边距都可以设定
块级元素宽度不设定，为⽗级元素宽度
⾼度不设定为内容⾼度，如果没有内容，⾼度为 0
常⻅的块级元素 div,p,h1,ul,li,table

8. 显示和隐藏元素

1. display:none

display：none; 使元素消失，脱离⽂档流的消失
display：block; 使元素出现，元素显示为块级元素
常用于鼠标移入出现的菜单

2. visibility: hidden

visibility: visible; 元素显示
visibility: hidden； 不脱离文档流，元素隐藏，占据⾃身位置
应用不太多,但可以用在头像等功能上

3. opacity: 0

opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明
缺点是，元素内的⼀切都会随着透明度改变

下拉菜单

    <style>
        /* 下拉菜单 */
        .xlcd {
            background-color: aqua;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .xlcd h1 {
            background-color: red;
            width: 200px;
        }
        .xlcd ul{
            /*先设置隐藏*/
            display: none;
            background-color: violet;
            width: 200px;
        }

        .xlcd:hover > ul{
            /*再设置移入xlcd显示*/
            display: block;
        }
    </style>

<!-- 下拉菜单 -->
<div class="xlcd">
    <h1>标题区</h1>
    <ul>
        <li>版本介绍</li>
        <li>游戏介绍</li>
        <li>英雄资料</li>
    </ul>
</div>

下拉菜单

9. 文本相关

1. 字体属性

`font-size`字体大小

取值，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现⼩数。
- px 像素
- pt 磅
- em ⽗级元素的倍数
- rem 根标签的倍数
- vw 视窗尺⼨
pt = px * dpi / 72
PC端默认最小12px，大多数浏览器默认大小是16px
“em”是⼀个相对的⼤⼩，相对的是"⽗级元素"的字体⼤⼩，我们可以这样来设置 1em，0.5em，1.5em

`font-family`字体

推荐字体序列：

移动端项⽬：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

pc端(含Mac)项⽬：
font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;

移动和pc端项⽬：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

`font-weight`字体自重

font-weight 字体的字重，字的粗细于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。
常⽤关键词：normal（400 默认）、bold（700）
浏览器不同展现效果不同，需要注意

`font-style`字体样式

font-style 字体样式属性
font-style: normal; 默认正常
font-style: italic; 斜体

`font`字体的简写方式

font:italic 400 40px chiller;
顺序：字体样式字重字号字体系列，不可改变顺序
最简⽅式font：40px chiller;字号和字体系列，不能再减少

2. 文本属性

1. 字体颜色

注意：不同终端展示颜⾊可能不同，尽量使⽤ web 安全⾊，或者沟通颜⾊的要求

color：颜⾊的⾊值
取值:英⽂，⼗六进制，rgba()，其他

2. 文本的对齐方式

默认text-align: left
text-align 针对块级元素中的内联元素，它需要写在⽗级（块级元素）中，不能写在⼦元素中（⽂字本身和内联元素）
内联元素和文字一样，如需再父元素（块元素）里水平居中，需要把text-align：center写给父级元素
块级元素在块级元素中水平居中（对齐方式）不能使用text-align属性，不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            /*color 代表字体颜色*/
            color: rgb(255,0,0);
        }
        .d2 {
            text-align: center;
            background-color: aqua;
        }
        /*span标签文字居中*/
        .d3 {
            background-color: yellow;
            text-align: center;
        }
        .d3 span {
            background-color: red;
        }

        .d4 {
            /*img行内块元素也是行，因此如需水平居中仍可以使用text-align：center属性，但还是需要加给父级元素*/
            text-align: center;
        }

     /* 块级元素在块级元素中水平居中（对齐方式）不能使用text-align属性，不起作用*/
        .d5 {
            background-color: yellowgreen;
            text-align: center;
        }
        .d5 > div {
            width: 50px;
            height: 50px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="d1">字体颜色</div>
<div class="d2">文本水平对齐</div>
<div class="d3">
    <span>包了一个内联元素</span>
</div>
<div class="d4">
    <img src="./img/图片居中.jpeg" alt="">
</div>

<div class="d5">
    <div></div>
</div>
</body>
</html>

text-align居中

案例：中文两端对齐

<style>
 div {
 width: 100px;
 height: 30px;
 border: 5px solid red;
 text-align: justify;
 box-sizing: border-box; /*必须写,清除幽灵*/
 }
 span {
 display: inline-block;
 padding-left: 100%;
 }
</style>
<!-- 需要加span -->
<div>姓名<span></span></div>
<div>联系⽅式<span></span></div>

3. 文本的行高

line-height 属性可以设置⽂本的⾏间距,可使⽤⻓度单位 px，或使⽤⽆单位的倍数如 1，1.5，2
⽂本的⾏⾼包括⽂字上下间距+⽂本⾼度，⽂本居中上下⾏间距相等
使⾏间距等于元素⾼度，则“单⾏⽂本”垂直显示在元素中
【扩展知识，不要求掌握】多⾏⽂本居中不能使⽤⾏⾼ padding-top（⾼度-（单⾏⾏⾼*⾏数））/2 还要 box-sizing: border-box

子元素在父元素里上下左右居中：line-height等于height

div {
  width: 100px;
  height: 50px;
  /* 行高等于父级元素高度 */
  line-height: 50px;
  /* 水平居中 */
  text-align: center;
}

多行文本垂直居中

div {
  height: 200px;
  line-height: 20px;
  /* （高度-行高*行数）/2 */
  padding-top: 70px; /*(200-20*3)/2*/
  box-sizing: border-box; /*注意border*/
}

4. 文本线条修饰

text-decoration: none;无线条
text-decoration: underline;下划线
text-decoration: overline;上划线
text-decoration: line-through; 删除线

5. 首行缩进

text-indent指定块容器中第一行文本的缩进
text-indent:2em两倍的字体大小,相当于空两格

6. 文本换行

文本换行的原因：

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义宽度之后自动换行。
对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

换行属性：

white-space: nowrap;不换行
word-wrap:break-word;强制换行

7. 文本溢出

各浏览器对text-overflow:ellipsis支持都不统一，特别是表现形式上，因此它的兼容性并不好。

文本超出部分隐藏overflow: hidden;
当对象内文本溢出时显示省略标记（...）text-overflow: ellipsis;
强制不换行white-space: nowrap

标签：样式,text,元素,笔记,color,选择器,css,属性
来源： https://www.cnblogs.com/caixiaocai/p/15942444.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css笔记

1. CSS术语

2. 选择器

1. 通用选择器

2. 元素选择器

3. id选择器

4. 类选择器【重要】

5. 群组选择器

6. 关系选择器

1. 后代选择器

2. 子代选择器

3. 兄弟选择器

4. 相邻兄弟选择器

7. 伪类选择器

8. 伪元素选择器

3. 选择器权重【牢记】

4. CSS优先级

1. 优先级原则

2. 优先级的比重大小

5. 尺寸单位

6. 边框

1. 边框的属性、

2. 边框的方向

3. 边框的简写方式

4. 小三角形制作

7. 元素的分类

1. 元素的显示属性

坑：解决行内块幽灵空白节点

2. 内联元素

3. 块级元素※※※※※

8. 显示和隐藏元素

1. display:none

2. visibility: hidden

3. opacity: 0

下拉菜单

9. 文本相关

1. 字体属性

font-size字体大小

font-family字体

font-weight字体自重

font-style字体样式

font字体的简写方式

2. 文本属性

1. 字体颜色

2. 文本的对齐方式

案例：中文两端对齐

3. 文本的行高

4. 文本线条修饰

5. 首行缩进

6. 文本换行

7. 文本溢出

`font-size`字体大小

`font-family`字体

`font-weight`字体自重

`font-style`字体样式

`font`字体的简写方式