CSS3 笔记（自用）

l yw

已于 2022-01-26 00:21:19 修改

阅读量126

点赞数

文章标签： css3 css html

于 2022-01-12 18:43:54 首次发布

本文链接：https://blog.csdn.net/yeahooooo/article/details/122349171

版权

1.在html中使用css方式

1.1行内样式

将css规则写到元素的style属性中

<p style="color:red;">hello</p>

1.2内联样式

将样式写到style标签中，通过选择器选中元素，然后为这些元素指定规则

<head>
<meta charset="utf-8">
<style>
p{
    color:blue;
    font-size:20px;
}
</style>
</head>

1.3外部导入

将样式集中到一个css文件中，通过link标签将这个css加载到html中

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
</html>

2.css3选择器

2.1核心选择器

标签选择器

又叫元素选择器，是最基本的选择器，使用元素名称直接选中元素

p{}  /*选中所有p标签*/

id选择器

id值不能重复，在选择文档中唯一元素时使用比较好

#one{}  /*选中id=one的元素*/

class选择器

类名不允许有空格，与元素中class属性值保持一致，一个元素可以有多个class的值，每个值通过空格分隔开，类名相同的元素属于同一类元素

.box{}   /*选中class为box的元素*/

并且选择器

多个选择器配合使用，达到精确选择的目的

ul.nav{}   /*选中class为nav的ul元素*/

和选择器

多个选择器组合使用，使用“，”分割

ul,nav{}   /*选中ul元素和class为nav的元素/

普通选择器

表示选择所有元素

*{}   /*表示选择所有元素*/

2.2层次选择器

子选择器

使用“>”隔开两个选择器，前一个选择器选择到父元素，后一个选择器对子元素进行过滤

ul.menu>li{}   /*选中class为menu的ul标签下的所有li标签*/

后代选择器

使用空格“ ”隔开两个选择器，前一个选择器选择到父元素，后一个选择器对后代元素进行过滤

ul.menu li{}     /*选中class为menu的ul标签下所有后代li元素*/

兄弟选择器

使用“+”隔开两个选择器，表示下一个兄弟，使用“~”隔开两个选择器，表示之后的所有兄弟

ul.menu>li:nth-child(2)+li{}  /*class为menu的ul的第二个子元素li的下一个兄弟*/
ul.menu>li:nth-child(2)~li{}  /*class为menu的ul的第二个子元素li的后边所有兄弟*/

2.3属性过滤器

input[name]{}  /*选择具有name属性的input元素*/
input[name=username]{}    /*选择具有name=username的input元素*/
input[name*=username]{}    /*选择具有name包含username的input元素*/
input[name^=u]{}     /*选择具有name属性以u为开头的input元素*/
input[name$=u]{}     /*选择具有name以u结尾的input元素*/

2.4伪类选择器

:first-child 选中父元素的第一个孩子元素

:last-child 选中父元素的最后一个孩子元素

:nth-child(n) 选中父元素的第n个孩子元素

ul>li:nth-child(2){}    /*选择ul里的第2个li*/

:visited 已访问过的状态，常用于a标签

:hover 鼠标悬停的状态，常用于a标签，其他标签也可用

:active 激活的状态，常用于a标签，其他标签也可用

2.5伪元素选择器

::after 在选中元素内部所有孩子元素后面追加一个子元素

ul::afer{}    /*在ul里的最后一个li后面添加*/

::before 在选中元素内部所有孩子元素前面插入一个子元素

3.字体样式

3.1.color

color为字体指定颜色，颜色的取值可以为关键字、6位16进制数值、RGB、RGBA等

p{
    color:yellow;
    color: #00ff00;
    color:rgb(12,35, 64);
    color:rgba(65, 25, 64, 0.1);
}

3.2.font-family

为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体，给定一个有先后顺序的、由字体名或字体族名组成的列表来为选定的元素设置字体，属性用逗号隔开，浏览器会选择第一个该计算机上有安装的字体。

font-family:"Microsoft YaHei","微软雅黑";

3.3.font-size

font-size为字体指定字体大小，取值单位有：

px（像素）、em（相对于当前对象内文本的字体尺寸，如果当前对象内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸）、rem（相对HTML根元素）

font-size:12px;

3.4.font-style

用于设置或取消斜体文本，取值有：

normal（正常）、italic（斜体）

3.5.font-weight

为字体设置粗细程度，取值有：

lighter、normal、bold、bolder 或者用数值表示（100-900）

3.6.line-height

为字体设置行高，用于文本的垂直居中

line-height:2em;

3.7.font

用来作为font-style、font-weight、font-size、line-height 和 font-family属性的简写

font:normal bold 12px/1 "微软雅黑";

4.文本样式

4.1.text-aligh

定义行内元素相对于它的块父元素对齐方式，取值有：

left、right、center

4.2.text-indent

定义一个块元素首行文本之前的缩进量

text-indent:2em;

4.3.text-transform

使文本显示为大写或小写，取值有：

none（默认）、capitalize（文本中的每个单词以大写字母开头）、uppercase（定义仅有大写字母）、lowercase（定义无大写字母，仅有小写字母）、inherit（从父元素那里继承）

4.4.text-decoration

用于设置文本的修饰线外观的，是text-decoration-line，text-decoration-color，text-decoration-style的速写形式

text-decoration: underline wavy red;       /*红色波浪形下划线*/

4.5.text-shadow

设置或取消文本阴影

text-shadow:3px 3px 1px gray;  /*水平方向 垂直方向 距离 颜色*/

4.6.text-overflow

确定如何向用户发出未显示的溢出内容信号

text-overflow:clip;   /*默认值，在内容区域的极限处截断文本*/
text-overflow:ellipses;   /*用省略号表示被截断文本*/

4.7.white-space

设置如何处理元素内的空白。

white-space:normal;    /*默认，空白会被浏览器忽略*/
white-space:nowrap;    /*文本不会换行，文本会在在同一行上继续*/

5.列表样式

一般我们将列表样式设置为none

list-style:none;

6.其他样式

6.1.cursor

调整光标悬浮在链接上的时候光标的形状

cursor:pointer;   /*光标为手指形状*/
cursor:crosshair;    /*光标为十字形状*/

6.2.visibility

设置内容显示与隐藏，占据屏幕空间

visibility:visible;     /*默认，可见的*/
visibility:hidden;     /*隐藏*/

6.3.opacity

设置透明度，0-1之间取值，取值为0时隐藏，占据屏幕空间

opacity:1;

6.4.overflow

盒子内部内容溢出部分处理

overflow:visible;    /*默认，内容不会被修剪，会呈现在元素框之外*/
overflow:hidden;    /*内容会被修剪，并且其余内容不可见*/
overflow:scroll;    /* 浏览器显示滚动条以便查看其余内容*/
overflow:auto;    /*由浏览器决定，如果内容被修剪，就会显示滚动条*/

7.盒子模型

box-sizing属性可以改变盒子模型，取值有：

content-box（内容盒子模型默认）

width只表示盒子内容所占宽度，height仅表示盒子内容所占高度

盒子实际所占宽度=width+2borderWidth+2paddingWidth

border-box（边框盒子模型）

width表示盒子实际所占宽度

width=内容宽度+2borderWidth+2paddingWidth

7.1背景色

background-color 设定盒子背景色
background-image 设定盒子背景图片取值有url(图片地址)
background-size 设定背景图片大小取值有：

cover——把背景图片扩展至足够大，以使背景图片完全覆盖背景区域

contain——把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

百分比——把图像进行缩放

取值——表示把图片设置为固定大小

background-repeat 设定背景图片重复方式取值有：

repeat repeat-x repeat-y no-repeat

background-origin 设定背景铺设的起点取值有：

border-box padding-box content-box

background-clip 用于设定背景裁切的方式取值有：

border-box padding-box content-box

background-position 用于设置背景图片的位置取值有：

center left 坐标

8.默认文档流

默认文档流就是对页面布局不加任何修饰，采用块元素自动的布局方式，其特点如下

元素在页面中的显示顺序与元素在代码中出现的顺序是一致的
块级元素独占一行空间，宽度默认为父级的百分之百，高度由其内容高度所决定
行内元素与其他元素共享一行空间，宽高由其内容所决定

9.浮动布局

浮动布局主要用法是为了让块级元素在一行中显示，或者让文字在图片的周围显示。float属性取值为：left、right、none、inherit（从父元素继承 float 属性的值）

如果为一个元素添加了float:left规则之后，该元素就变成了浮动元素，可以是块元素脱离当前的文档流

浮动元素的特点：

不再独占一行空间，宽度默认由内容决定，可以为其指定宽度
不占据屏幕中原有的位置，之后的非浮动兄弟元素会抢占它原有的位置
兄弟浮动元素会在一行中显示，如果一行放不下，会自动换行

如果一个父元素中所以子元素都浮动，那么父元素高度为0，因为浮动元素都脱离了文档流，失去对父元素的支撑。通常情况下，需要通过clear属性清理浮动，取值为left、right、both

ul::after{
    content:"";
    display:block;
    clear:both;
}     /*清理浮动*/

10.伸缩盒布局

10.1概念

伸缩盒容器 div.container、ul.container

伸缩盒元素 div、li

主轴默认主轴x轴，伸缩盒中，伸缩盒元素沿着主轴来进行排列

交叉轴与主轴垂直的轴

10.2规则

伸缩盒容器：

display:flex;

强制让子元素沿着主轴方向显示，并且子元素不会脱离文档流，交叉轴上元素高度如果没有指定，应该与父元素保持一致

flex-direction:row;

定义主轴方向，row表示主轴是x轴，column表示主轴是y轴

align-items：stretch；

定义伸缩盒元素在交叉轴上的对齐方式

取值有：stretch（拉伸满）、center（中间）、flex-start（开头）、flex-end（结尾）等

justify-content:space-around;

定义伸缩盒元素在主轴上的对齐方式

取值有：center（中间）、flex-start（开头）、flex-end（结尾）、space-between（中间间隔相等）、space-around（周围间隔相等）等

伸缩盒元素：

flex-basic:200px; 主轴上的基础长度（基本工资）

flex-grow:2; 主轴上剩余空间分配的份数（分红）

flex-shrink:1; 主轴上亏损空间的分摊份数

11.居中问题

文本在盒子中

l yw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫