CSS 基础

星乐学编程

已于 2024-06-04 21:27:41 修改

阅读量768

点赞数 13

文章标签： css 前端

于 2024-06-04 21:11:19 首次发布

本文链接：https://blog.csdn.net/2403_85172219/article/details/139454025

版权

语法：

选择器{

属性：值

}

选择器

规则：（一般的规则）

1.选择器写的越准确（越长）优先级会越高

2.id选择器>class选择器>元素选择器

3.同级别，同长度下，css代码按顺序执行，后面的代码把前面统一样式的代码覆盖掉，不同的样式效果会叠加

一、基本选择器

1、元素选择器：

用元素名称做选择 element{ }；

*{ }表示所有元素

2、属性选择器：（ id class 自己造的）

div[ id ]：有 id 属性的 div 元素

div[ id=xx ]：有 id 属性并且 id 属性值为 xx 的 div 元素

div[ id*=xx ]：有 id 属性并且包含 id 属性值包含 xx 的div元素

div[ id^=xx ]：有 id 属性并且包含 id 属性值以 xx 开头的div元素

div[ id$=xx ]：有 id 属性并且包含 id 属性值以 xx 结尾的div元素

3、id选择器：

# + id 值{ }

4、class选择器

. + class 值 { }

5、包含选择器：强调包含关系，不一定是父子关系

selector1+空格+selector2{ }

6、结合选择器：

p#aa：id值aa的p标签

div.aa：class值是aa的div标签

7、子选择器：强的包含关系，必须是父子

selector1+ > +selector2{ }

8、兄弟选择器：

selector1+ ~ +selector2{ } 找selector1的弟弟里面找所有符合selector2的元素。

9、选择器组合（多选）（可以结合上面的选择器）

selector1，

selector2，

selector3{ }

二、伪元素选择器

1、首字母（块级元素）

p::first-letter { }

2、首行（块级元素）

p::first-line { }

word-break:break-all 全是英文时换行

word-break:keep-all 全是英文时不换行

}

3、往前+东西::before

div::before {

background:pink；

content:"aaa";//表示添加的内容，即使没有内容添加content也要在

}

4、往后+东西::after{}

div::after {

content:"aaa";

background:blue

//表示添加的内容，即使没有内容添加content也要在

}

三、伪类选择器

1、结构性伪类选择器：

①只认数的第n个：

:nth-child( ) 括号里可以加：数字，数字从1开始；表达式，2n+1 3n+2...n从0开始；odd（奇数）even（偶数）。找第一个：:nth-child(1) 和 :first-child 一样

②倒着数

:nth-last-child( ) 括号里可以加：数字，数字从1开始；表达式，2n+1 3n+2...N从0开始；odd（奇数）even（偶数）。找最后一个：:nth-last-child(1) 和 :last-child 一样

③即认数又认类型的第n个：

：nth-of-type( ) 括号里可以加：数字，数字从1开始；表达式，2n+1 3n+2...N从0开始；odd（奇数）even（偶数）。:nth-of-type(1) 和 :first-of-type 一样

④倒着数

:nth-last-of-type( ) 括号里可以加：数字，数字从1开始；表达式，2n+1 3n+2...N从0开始；odd（奇数）even（偶数）。:nth-last-of-type(1) 和 :last-of-type 一样

2、UI状态选择器

①:hover 悬停状态（鼠标放上去的时候）

②:focus 焦点状态（输入框输入的时候）

③:checked 选中状态（单选框，复选框）

3、其他选择器

①:not（）排除

盒子模型

1、块级元素（标签、盒子）特征：独占一行，对宽度高度支持（ div p h1 ul li）display属性是block

2、内联级元素（标签、盒子）特征：不独占一行，对宽度高度不支持（span a ）display属性是inline

3、内联块级元素（标签、盒子）特征：不独占一行，但是对宽度高度支持（img input ）display属性是inline-block

4、弹性盒子特征：默认情况下不管父亲能不能放下子元素们，子元素都横着布局。display属性是flex

1、内容区

width height

属性 box-sizing:border-box 指对整个盒子进行设置，默认值是 content-box 只对内容去进行设置

2、填充区（padding）（默认是0）

padding:30px 上下左右30；padding:30px 80px 上下30 左右80；padding:30px 80px 60px 上30 右80 下60 做80

padding-top 单独对上（top right bottom left）设置

3、边框区（border）（默认是0）

border（复合属性，由边框样式 border-style 边框宽度 border-width 边框颜色 border-color 组成）三个方面四个方向，可以结合 border-top-style 对上（top right bottom left）进行设置

边框样式 border-style 实线 solid 虚线 dashed

边框宽度 border-width

边框颜色 border-color

4、外边距（margin）和 padding 用法一样

auto 水平方向居中（适用于块级元素）

布局

一、竖着布局：div

二、横着布局：

1.传统布局：需要横向布局的元素加 float 属性其值 left左浮动）right（右浮动）

存在的问题：使用float之后如果父级元素没有高度的话，就会导致下方的元素向上移动，产生多重元素重合的问题；解决办法：①给父亲设置高度（不推荐）；②不设置高度，给父级设置overflow:hidden;达到父级高度随子级高度自适应的效果。无法解决的问题：①元素之间的间距分布需要计算，而且不一定能够均匀分布；②元素均分父级空间需要计算，而且不一定能够均分；③书写比较繁琐，代码冗余；

2.传统布局：需要横向布局的元素加 display:inline-block 变成内联块级元素；

存在的问题：使用 display:inline-block 之后元素之间产生莫名其妙的空隙，对整体布局产生影响；原因：浏览器会把换行、空格当成空白做处理；解决办法：①元素首位相连（不推荐）；②对文字大小进行处理:给使用 display:inline-block 的父级元素设置字体大小为0，并为该父级元素下的子元素设置各自的字体大小（否则子级元素继承父级元素字体大小后，子就没了）。无法解决的问题：①元素之间的间距分布需要计算，而且不一定能够均匀分布；②元素均分父级空间需要计算，而且不一定能够均分；③书写比较繁琐，代码冗余；

3.现代布局（弹性盒子布局 display:flex ）：想让多个元素横着布局，给父级元素加 display:flex 。父级会随着子级高度的变化而变化。

弹性盒子属性：

①flex-direction 控制子元素的排列方向，加在父亲身上其值 row（从左到右，默认值）row-reverse（从右到左）column（从上往下，竖着排）column-reverse（从下往上，竖着排）

②flex-wrap 控制弹性盒子内元素是否换行其值 wrap （换行） nowrap（不换行，默认值）

③order 设置弹性盒子内子元素的排列顺序，值是一个整数值，值越小，顺序越靠前，作用于子元素

④flex 控制弹性盒子内子元素的缩放比例，作用于子元素其属性 flex-grow（拉伸因子，其值整数，是孩子所加原来多余空间的比例。）flex-shrink（压缩因子，不写的时候会默认按照原始值所占比例进行压缩，其值整数，是孩子所减原来超出部分的比例）flex-basis（基准因子，默认的宽度）

⑤ justify-content 控制弹性盒子内子元素的分布方式其值 flex-start （代表子元素分布在开始位置）center（表示子元素分布在中间位置）flex-end（代表子元素分布在结束位置） space-between（代表空白元素均匀分布在元素之间）space-around（代表空白元素均匀分布在元素左右两侧，边界处占一份，元素之间占两份）space-evenly（表示空白元素均匀分散）

⑥align-items 控制弹性盒子内子元素在垂直方向上的对齐方式其值 flex-start（默认值，开始左或上对齐）flex-end（结束右或下对齐对齐）center（居中对齐）baseline（首行底部对齐）

⑦align-content 设置弹性盒子内多行元素的分布方式其值 flex-start（所有行都靠近顶部或者左端）flex-end（所有行都靠近底部或右端）center（所有行都居中显示）space-between（空白元素放到行和行之间）space-around（所有元素均匀放在各行周围）space-evenly（空白元素均匀分布）

样式（优先级：行内样式最高，外部样式和内部样式优先级相同，和排序有关。）

行内样式：在标签内用 style 加样式，耦合度很高。

内部样式：在 head 内用 style { } 标签：加样式

外部样式：

，css

1.颜色的表示方式：① red yellow 直接用英文名称表示，简单但是能表示的颜色数量有限（特transparent 透明色）； ② #000000 用六位十六进制（0~f）表示颜色（三原色混合原理）两位数前后相同的情况下，可以用三位表示； ③rgb(red，green，blue) 三原色混合原理，取值范围是0~255；④rgba(red,green,blue,alpha) alpha表示透明度（0~1） opactity（0~1）也是用来表示透明的的，rgb里的a只针对于背景颜色；而opactity 表示对整个html设置透明度，包括文字什么的。⑤颜色渐变：linear-gradient(方向deg，颜色，颜色，...) deg是角度单位 0deg 代表12点方向，角度值代表顺时针转过的角度

2.背景相关的样式background（复合属性）：①background-color； ②background-image:url("地址") 用于设置背景图片使用 url 函数指定背景图片的地址； ③background-repeat 背景图片是否平铺，其值repeat 平铺，no-repeat 不平铺，repeat-x 只在x（或y）轴方向上平铺； ④background-size 控制背景图片的大小其值cover是铺满，也可以是mpx，npx； ⑤background-position 控制图片位置； ⑥background-attachment:fixed 控制背景图片不随浏览器的滚动而滚动。

3.和字体相关的样式：① font-size 字体大小； ② font-weight 字体粗细； ③字体颜色； ④ font-style 设置字体风格，italic 倾斜 normal 正常； ⑤ text-decoration 控制文字是否有修实线， underline （下划线） line-through （中划线）overline （中划线）； ⑥ text-align 控制文本水平对齐方式 right （右边）left（左边）center（居中）

4.列表相关的样式：①list-style:none 去掉列表样式

5.边框相关的样式：①border-radius 圆角边框，其值 m px是圆角边框圆角的半径，半径越大，圆角的程度越大。border-radius:50px 90px 21px 32px;从左上角开始，顺时针进行旋转，和padding设置类似。也可以结合 top bottom right left 对单独某个交进行设置。 border-top-left-radius:30px;

6.阴影：①外阴影 box-shadow ：水平偏移量垂直偏移量模糊度颜色; ②内阴影 box-shadow:平偏移量垂直偏移量模糊度颜色 inset ；

7.图片相关的样式：①单一的设置宽高时另一个会按照原始比例自适应； ② object-fit:cover 图片不变性；

8.鼠标相关的样式：cursor:pointer 鼠标放上去后变成小手

定位

四种定位 position：其值 relative absolute fixed static（结合上下左右设置相对位置）

1.static 默认值，代表静态模式。

2.relative 相对模式特点：随着浏览器的滚动而滚动，保留自己原来的空间，参考物是自己原来的位置

3.absolute 代表绝对模式特点：随着浏览器的滚动而滚动，释放自己原来的空间，参考物是整个浏览器

4.fixed 代表固定模式特点：不随浏览器的滚动而滚动，释放掉自己原来的空间参考物是整个浏览器

5.结合模式：父级用相对模式，子级用绝对模式。特点：子级随浏览器的滚动而滚动，会释放到原来的空间，参考物是他的父亲。overflow:hidden;超出部分隐藏

6.z-index：设置定位层级。