CSS学习自用

最新推荐文章于 2024-04-12 05:20:57 发布

馋嘴deZ

最新推荐文章于 2024-04-12 05:20:57 发布

阅读量145

点赞数

分类专栏：学习自用文章标签： css

本文链接：https://blog.csdn.net/weixin_42348386/article/details/109908838

版权

学习自用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的各类用法，包括标签选择器、类选择器、ID选择器、通用选择器以及各种层次选择器。此外，还讨论了CSS的级联规则、继承机制、单位值、文本样式、布局、背景、边框、表格样式、定位和浮动布局等核心概念。同时，提到了CSS在动画、变形和过渡等方面的应用。

摘要由CSDN通过智能技术生成

CSS

一、CSS选择器

标签选择器

p{
	height: 50px;
	font-size: 14px;
}

类选择器

类选择器以"."开头，与元素中class属性的值保持一致。

.first{
	font-weight: bold;
}

<div class="first">Hello</div>

ID选择器

ID选择器以"#"开头，在一个文档中，ID值不能重复。

#first{
	font-weight: bold;
}

<div id="first">Hello</div>

普遍选择器

以"*"表示普遍选择器，表示选择所有元素。

.left-nav>* { width:200px; background-color:#fafafa}

<div>
	<dl> 
		<dt>推荐</dt> 
		<dd class="current"><i class="icon-music"></i>发现音乐</dd>
	</dl>
	<dl>
		<dt>我的音乐</dt>
		<dd><i class="icon-cloud-download"></i>下载的音</dd>
	</dl>
</div>

层次选择器

后代选择器
使用" &nbsp"隔开两个选择器，包括所有后代，直接后代和间接后代。
子代选择器
使用">"隔开两个选择器，即选择直接子代元素。
相邻同胞选择器
使用"+"隔开两个选择器，表示相邻的下一个兄弟元素。
一般同胞选择器
使用"~"隔开两个兄弟元素，表示之后所有的兄弟元素。

属性选择器

[attr]
选择具有attr属性的元素，无论该属性的值是什么。
[attr=val]
选择具有attr属性的，并且attr的值为val元素。
[attr ^= val]
选择具有attr属性的，并且attr的值以val元素开头的。
[attr $= val]
选择具有attr属性的，并且attr的值为是以val结尾的。
[attr *= val]
选择具有attr属性的，并且attr的值包含val的元素。
[attr ~= val]
选择具有attr属性的，并且attr的值之一为val的元素。

伪类选择器

伪类选择器以":"开头，用在选择器之后，指明元素在某种状态下被选中。

子代伪类选择器

:only-child 选中独生元素
:first-child 选中元素为第一个孩子的元素
:last-child 选中元素为最后一个孩子的元素
:nth-child(n) 选中元素作为第几个孩子元素的元素
nth-last-child(n) 选中元素作为倒数第几个孩子的元素
:first-of-type 选中元素作为每种类型中的第一个孩子的元素
:last-of-type 选中元素作为每种类型中最后一个孩子的元素
nth-of-type(n) 选中元素作为每种类型中第几个类型的元素
nth-of-last-type(n) 选中元素作为每种类型中倒数第几个类型的元素

元素状态伪类选择器

:link 未被访问的状态，a标签
:visited 已访问过的状态，a标签
:hover 鼠标悬停的状态，a标签，其他标签也可用
:active 活动时的状态，a标签，其他标签也可用
:focus 聚焦的状态
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
:enabled、 :disabled 可用的表单控件、禁用的表单控件
:valid 、:invalid 通过表单验证的、不通过表单验证的
:required、:optional 必填的和选填的
:in-range 、:out-of-range 在范围内的、在范围外的

伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。

::after 选中之后的不存在的节点，可配合content属性进行内容填充
::before 选中之前的不存在的节点，可配合content属性进行内容填充
::first-letter 选中第一个文本字符
::first-line 选中第一行文本
::selection 选中用户在选择的时候的文本

二、CSS级联

!important声明

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议 不使用"!important"

特性值

元素的style属性中，特性值为1000
ID选择器，特性值为100
类选择器，属性选择器，伪类选择器，特性值为10
元素选择器，伪元素选择器，特性值为1

代码顺序

如果多个竞争选择器具有相同的重要性和特性值，采取就近原则。

三、CSS继承

CSS有些规则默认会被子元素继承。

继承值：

inherit 继承父元素样式
initial 不继承。默认样式
unset 不设定

可继承属性： font系列属性，文本系列属性，列表系列属性，cursor，visibility。
不可继承属性：margin，padding，border。

四、CSS单位值

CSS颜色单位

RGB 红色，绿色，蓝色
RGBA 红色，绿色，蓝色，透明度
十六进制 #FFFFFF
HSL和HLSA
第一个参数为色调，取值0~360，0是红色，120是绿色，240是蓝色。
第二个参数为饱和度，取值0~100%，0为灰色，100%为全彩，色彩会越来越饱和。
第三个参数为亮度，取值0~100%，0为黑色，100%为白色，会越来越亮。
第四个参数为透明度，取值0~1。

CSS长度

绝对单位 px
相对单位 em和rem，（1em = 16px,根据网页字体大小发生变化）
百分比 %

五、CSS文本样式

color 指定字体颜色
font-size 指定字体大小
font-family 指定特殊字体
font-style 打开和关闭斜体文本
取值：normal，italic,oblique
font-weight 设置字体粗细程度
取值：normal,bold,lighter,bolder,100-900
text-align 文字排列方式
取值：left，center，right
text-transform 文本变形
取值：none，uppercase，lowercase，capitalize，full-width(类似等宽字体)
text-decoration 文本修饰
取值速写：line style color
text-decoration-line 修饰线的种类
取值：none,underline,overline,line-through
text-decoration-style 修饰线样式
取值：solid,wavy,dashed,dotted,double
text-decoration-color 修饰线颜色
text-shadow 文本阴影
text-shadow: h-shadow v-shadow blur color

列表样式

list-style 设置列表的样式
速写：list-style: type image position

list-style:none 无列表样式
list-style-type 设置标志项的类型
取值：
none 没有标志项
disc 实心原点
square 实心方形
circle 空心圆
decimal 数值
decimal-leading-zero 补零的数值
lower-roman 小写罗马
upper-roman 大写罗马
…
list-style-position 设置标志项的位置
取值：
outside 在主框外
inside 在主框内
list-style-image 自定义设置标志项的图片
取值：url(" ")
如果type和image都可用，那么用image的，如果image不可用，那么用type的。

默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ，padding-left为 40px(2.5em)。
dl 元素的margin-top，margin-bottom均为16px(1em)，但是没有内边距
dd 元素的margin-left为40px(2.5em)
p 元素的margin-top，margin-bottom为16px(1em)
body元素 margin-top, margin-bottom, margin-left, margin-right为8px

其他样式

cursor 调整光标悬浮到链接上的时候光标的形状
line-height 设置文本的行高
outline 调整环绕链接的框，类似border，不占据屏幕空间
outline-width,outline-style,outline-color,outline-offset
display 显示方式（none 不占据屏幕空间）
取值：inline,block,inline-block,none
visibility 显示与隐藏
取值：
hidden：占据屏幕空间
visible：显示
opacity 透明度，0-1，隐藏时占据屏幕空间
overflow 溢出处理
取值：hidden,auto,scroll

盒子模型

box-sizing
取值：content-box,padding-box,border-box

w3c盒子 box-sizing:content-box
width 属性仅表示内容所占的宽度
height 属性仅表示内容所占的高度
IE盒子 box-sizing: border-box
width 属性表示盒子的宽度为内容区的宽度加两边padding的宽度加两边边框的宽度
height 表示盒子的宽度为内容区的高度加两边padding的高度的加两边边框的高度

背景

background-color 背景颜色
background-image:url(’’) 背景图片
background-repeat 背景图片重复方式
取值：
repeat-x x方向重复一行
repeat-y y方向重复一列
no-repeat 不重复
repeat 【默认】x方向y方向重复铺满
background-position 设置背景图片的位置
background-origin 设置背景图片开始的区域
取值：
padding-box 【默认】从内间距区开始绘制
border-box 从边框区开始绘制
content-box 从内容区开始绘制
background-clip 背景图片的裁切
取值：
padding-box 从内间距区开始裁剪
border-box 【默认】从边框区开始裁剪
content-box 从内容区开始裁剪
background-attachment 设置背景图片的固定点
取值
scroll 【默认】背景图片随着滚动条滚动
fixed 背景图片固定，即使内容滚动，背景图片不滚动

边框

速写属性：
border: width style color
border-width: 边框宽度
border-style: 边框样式
border-color: 边框颜色

border-radius 指定圆角边框半径

表格

border-collapse 指定表格的边框是合并还是分开
取值：separate，collapse
caption-side 指定caption坐落在表格的哪个位置上
取值：top,bottom
background 表格背景颜色

布局

浮动布局float
float: left / right / none
将块级元素显示在一行，脱离文档流。浮动在上层。清除浮动时，在兄弟元素上，clear:both；在父子元素上，overflow:hidden。
定位布局
position：static / relative / fixed / absolute / sticky
相对定位 relative，相对于原先在文档流中的位置定位，不脱离文档流。
固定定位 fixed，相对于视口区进行定位，固定在某一个位置，页面滚动的时候它不动。脱离文档流。
绝对定位 absolute，如果有定位祖先元素，相对于离它最近的定位祖先元素进行定位。如果没有定位祖先元素，相对于视口区的左上角进行定位。脱离文档流。
黏贴定位 sticky，在滚动时，距离顶部部分距离时，固定在窗口不动。
z-index 设置元素堆叠顺序属性，仅在绝对定位元素上有效，数值越大，越靠上
伸缩盒布局
主轴默认x轴，可以通过设置flex-direction去改变
交叉轴默认y轴
在容器上使用的属性
display:flex;
justify-content:flex-start/flex-end/center/space-between/space-around; 子元素在主轴上的排列方式
align-items:flex-start/flex-end/center/stretch/baseline; 子元素在交叉轴上的排列方式
align-content:flex-start/flex-end/center/stretch/space-between/space-around 多主轴在交叉轴上的排列方式
flex-direction:row/row-reverse/column/column-reverse; 伸缩方向设置
flex-wrap:nowrap/wrap/wrap-reverse; 设置子元素在容器内是否换行
flex-flow:flex-direction flex-wrap; 速写属性
flex-flow:row wrap;
在子元素上使用的属性
flex:1; 子元素占容器空间的几分之一
flex:1 300px;
flex:300px 1; 子元素最小大小为300px，如果容器内有剩余空间，那么再占一份

CSS动画 animation

声明一个动画

  @keyframes myani{
    from{
      ....
    }
    20%{
      ....
    }
    50%{

    }
    to{
      ...
    }
  }

使用动画
div{
animation-name:myani; //使用某一个动画
animation-duration:300ms/3s; //设置动画时长
animation-delay:200ms/2s; //动画延迟时间
animation-play-state:paused/running; //动画状态
animation-iteration-count:5/infinite; //动画迭代的次数
animation-direction:normal/reverse/alternate/alternate-reverse; //动画的方向
animation-timing-function:linear; //动画执行的速度曲线
}

CSS变形 transform

声明一个动画

  @keyframes myani{
    from{
      ....
    }
    20%{
      ....
    }
    50%{

    }
    to{
      ...
    }
  }

在变形中旋转倾斜缩放移动
只有旋转据有z轴方向
transform: rotate(deg) z轴方向上转动
transform: rotateZ(deg) z轴方向上转动
transform: rotateX(deg) x轴方向上转动
transform: rotateY(deg) y轴方向上转动

transform: skewX(deg) x轴方向上倾斜
transform: skewY(deg) y轴方向上倾斜
transform: skew(deg,deg) x轴和y轴方向同时倾斜

transform: scaleX(1) x轴方向上缩放 //大于1放大小于1缩小
transform: scaleY(1) y轴方向上缩放
transform: scale(1,1) x轴和y轴方向同时缩放

transform: translateX(px) x轴方向上移动
transform: translateY(px) y轴方向上移动
transform: translate(px,px) x轴和y轴方向同时缩放

动画和变形需要@keyframes 进行动画声明

CSS过渡 transition

transition: property duration timing-function delay
transition 是 transition-property， transition-duration，transition- timing-function ， transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

馋嘴deZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习自用

CSS选择器标签选择器p{ height: 50px; font-size: 14px;}类选择器类选择器以"."开头，与元素中class属性的值保持一致。.first{ font-weight: bold;}<div class="first">Hello</div>ID选择器ID选择器以"#"开头，在一个文档中，ID值不能重复。#first{ font-weight: bold;}<div id="first">Hello&l
复制链接

扫一扫