CSS基础用法

时间:2024-07-05 22:35:32

【CSS常用选择器】

标签选择器

写法: HTML标签名{}
作用: 可以选中页面中,所有与选择器同名的HTML标签。

类选择器(class选择器)
写法: .class名{}
调用: 在需要调用选择器样式的标签上,使用class="class名"调用选择器
优先级: >标签选择器

ID 选择器
写法: #ID名{}
调用: 需要调用样式的标签,起一个id="ID名"
优先级: ID选择器>class选择器
注意: 一个页面中,不能出现同名ID

通用选择器
写法: *{}
作用: 可以选中页面中所有的HTML标签。
优先级: 最低!!!

并集选择器
写法: 选择器1,选择器2,……,选择器n{}
生效规则: 多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

交集选择器
写法: 选择器1选择器2……选择器n{} 所有选择器紧挨着,没有分隔
生效规则: 多个选择器取交集,则必须满足所有选择器的要求,才能生效

后代选择器
写法: 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
生效规则: 只要满足,后一选择器是前一个选择器的后代,即可成效。(后代包括子代、孙代、重孙代。。。)

子代选择器
写法: 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则: 必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(中间不能间隔任何标签)

【优先级的权重问题】
1、CSS生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;

 2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
 ID选择器*100 > class选择器*10 > 标签选择器*1

注意: 并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。

 3、 当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。

CSS中的颜色表示方式
① 直接使用颜色的单词表示:red、green、blue
② 使用颜色的十六进制数表示:#ff0000 #f00
 六位数,两两分组,分别表示红、绿、蓝的配比;
 ③ rgb(0~255,0~255,0~255); 三位数,分别表示红、绿、蓝的配比
 rgba(); 第四位数,表示透明度。

【CSS常用文本属性】
 1、 字体、字号类:
 ① font-weight: 字体粗细。 bold-加粗、normal-正常、lighter-细体
 也可以使用100-900数值,400表示normal,700表示bold

 ② font-style: 字体样式。 italic-倾斜、normal-正常

 ③ font-size: 字号。 可以写px单位,也可以写%

200%表示浏览器默认大小(16px)的两倍=32px

 ④ font-family: 字体系列(字体族)。
 >>> 可以直接写字体名,也可以写字体系列名。
 >>> 常用字体系列:serif-衬线体 sans-serif-非衬线体;
>>> font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。 通常,最后一个值放字体系列名;
 eg: font-family: "黑体","微软雅黑",sans-serif;

⑤ font缩写形式:
 >>> 顺序必须是:
font-weight font-style font-size/line-height font-family
 >>> 不同属性之间,用空格分隔;

>>> font-size/line-height必须一组,用/分隔;
 >>> font-family多个字体之间,用逗号分隔
 >>> eg: font: bold italic 32px/50px "微软雅黑",serif;

 2、 字体颜色
① color: 字体颜色 可以使单词、十六进制、RGB等

② opacity: 透明度,可选值0-1
 [opacity和RGBA的区别]
 >>> RGBA本身可以设置颜色,而opacity必须配合其他颜色属性来用;
 >>> rgba仅仅是让当前元素设置的颜色透明; 而opacity,会让当前元素里面的所有文字、背景、子元素都透明; 3、行距、对齐、其他类 ① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)

>>> 行高重要作用: 让单行文字在div中垂直居中?
设置行高等于div的高度,即可让单行文字垂直居中。

 ② text-align:设置区域内的行级元素水平对齐方式left/center/right

 ③ letter-spacing: 字符间距,字与字之间的距离

 ④ text-decoration: 文本修饰;
underline-下划线、overline-上划线、line-through-删除线、none

⑤ overflow: 设置超出区域文字的显示方式。
>>> overflow: hidden; 超出区域的文字隐藏不显示;
    >>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
    >>> overflow: auto; 自动。文字多显示滚动条,文字少,不显示滚动条。
    >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;

⑥ text-overflow:设置行末多余文字的显示方式;
>>> clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
>>> 显示省略号,需要配合white-space: nowrap;使用
>>> 【重点】 设置行末显示省略号(三行代码,缺一不可)
overflow: hidden;
white-space: nowrap;
   text-overflow: ellipsis;

⑦ white-space: nowrap; 设置中文行末,不断行显示

⑧ text-indent: 首行缩进。

⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari

⑩ text-shadow: 文字阴影,有四个属性值,空格分隔;
 >>> 水平阴影距离,正数表示阴影右移,负数左移;
 >>> 垂直阴影距离,正数表示阴影下移,负数上移;
 >>> 阴影模糊距离, 0表示阴影一点不模糊;
>>> 阴影的颜色;
>>> eg:text-shadow: 20px -10px 2px blue;

【CSS常用背景属性】
1、 background-color: 背景色

 2、 background-image: 背景图。使用url("")选择背景图片。背景图和背景色同时存在时,背景图覆盖背景色。

 3、 background-repeat: 背景图的重复方式。
 no-repeat-不平铺、repeat-平铺、repeat-x-x轴平铺、 repeat-y-y轴平铺

 4、 background-size: 背景图的大小
 [指定宽度高度]
 >>> 宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)

>>> 当写两个属性时,分别表示宽度、高度;

当写一个属性时,表示宽度,高度将会等比缩放;
 [其他属性值]
 >>> contain: 图片等比缩放,直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
>>> cover: 图片等比缩放,直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)

5、 background-position: 背景图偏移量
 >>> 指定位置: left/center/right top/center/bottom
 当,只写一个值时 ,另一个默认居中。
>>> 指定坐标: 两个属性分别表示 :水平位移 垂直位移
 ① 坐标的值,可以是px单位,也可以是百分数
② 当写px单位时:
水平方向:正数右移 负数左移 ; 垂直方向: 正数下移 负数上移;
(左负右正 上负下正)
③ 当写%百分数时:
 一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。 eg:background-position:30%; 水平方向去掉图片宽度,剩余区域3:7分。[伪类选择器]

1、写法: 伪类选择器,在选择器后面,用:分隔,紧接伪类状态;
eg : .a:link

2、 超链接的伪类状态:
:link - 未访问状态 :visited - 已访问状态
hover - 鼠标指上状态 :active - 激活选定状态(鼠标点下未松)

注意:当超链接多种伪类状态同时存在时,必须按照link-visited-hover-active的顺序,否则会导致部分选择器不生效;

3、 input的伪类状态:
hover :focus - 获得焦点状态 :active

注意input的多种状态同时存在时,必须按照上面的顺序;

 4、 其他标签,基本只用:hover事件

[border-radius 圆角]

1、border-radius可以接收8个属性值,分别表示:

X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)
eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
 2、缩写形式:
只写X轴,Y轴将默认等于X轴;
四个角写不全,默认对角相等;
 只写一个值,默认8个数均等;
 eg: border-radius:50px 20px;
 = border-radius:50px 20px 50px 20px;
 = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
 3、当圆角弧度>=正方形边长一半,将会显示为圆形。[border-image 图片边框]* 1、border-image:一共可以放10个属性值:* ① 图片的路径: url();

② 图片的切片宽度: 4个值,分别代表上、右、下、左四条边;
 通过4条切线切割,可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸),9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
注意: 写的时候,必须不能带px单位!!!!

 ③ 边框的宽度: 4个值,分别代表上、右、下、左四条边框的宽度;
注意: 写的时候,必须带px单位,与切片宽度用/分隔!!!

④ 边框的重复方式: stretch(拉伸)、round(铺满)、repeat(重复)
 [round和repeat的区别]
round: 会对四条边进行适当的拉伸压缩,确保四条边可以重复整数次;
repeat:会保持每条边的长度比例不变,可能导致四角处,无法显示一条完整的边;
 2、 属性值写法: border-image: ① ②/③px ④;

3、 border-image在webkit内核的浏览器中,必须带-webkit-前缀。[box-shadow 盒子阴影]

1、 6个属性值,空格分隔:
① x轴阴影距离(必选): 可正可负,正——右移,负——左移;
② y轴阴影距离(必选): 可正可负,正——下移,负——上移;
 ③ 阴影模糊半径(可选): 只能为正,默认为0.数值越大,阴影越模糊;
④ 阴影扩展半径(可选): 可正可负,默认为0.数值增大,阴影扩大;数值减小,阴影缩小;
 ⑤ 阴影颜色(可选): 默认为黑色
⑥ 内外阴影(可选): 默认为外阴影。 inset表示内阴影;

1、标准流中的块级盒子,宽度将会自动伸展为100%;
而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开;

2、 当一个盒子浮动, 标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子,会盖在这个盒子的上方)
但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响。(未浮动盒子中的内容,不会被浮动盒子盖住)

3、由于第二条的原因。

可以给受影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响。
clear可选值:left-清除左浮动影响, right-清除右浮动影响;

4、 父盒子没有指定高度。 如果子盒子没有浮动,则父盒子的高度可以被子盒子撑开。

如果,父盒子中的所有子盒子都浮动,则父盒子高度将变为0;

[解决所有子盒子浮动,父盒子高度塌陷的问题]
① 给父盒子也添加浮动;
② 给父盒子添加overflow属性; 推荐使用!!!
③ 在父盒子最后,添加一个高度为0的空div。 给这个div添加clear: both;属性,清除掉浮动效果。
④ 可以将第三条的div,用伪对象选择器::after实现:
#div4::after{
 display:block;
content:"";
height:0px;
clear:both;

both-同时清除左右浮动影响 ,常选;

[相对定位 relative]

1、 使用position:relative; 设置元素为相对定位元素;

2、 使用top、right、bottom、left调整元素的位置。当left和right同时存在时,left生效; top和bottom同时存在时,top生效。
3、 定位机制:
① 相对定位是相对于自己原来的位置定位。当top等属性不指定时,元素位置不会发生改变;
② 相对定位,不会释放掉元素在原有文档流中的位置。 不会影响其他文档流元素的位置;

 4、 关于元素Z轴重叠:
 ① 定位元素,默认的Z轴高于普通文档流元素。
② 同为定位元素,"后来者居上"。后面的盖住前面的。
 ③ 可以使用z-index手动调节定位元素的上下层z轴顺序;
z-index默认为0,而且只能作用于定位元素。

[绝对定位]

1、 使用position: absolute; 设置元素为绝对定位;
2、 定位机制:
① 相对于第一个非static定位的祖先元素进行定位。
(即,相对于第一个使用了relative、absolute、fixed定位的祖先元素进行定位)
 ② 如果所有的祖先元素都未定位,则相对于浏览器左上角进行定位;
③ 使用absolute的元素,会从文档流中完全删除。原有空间会被释放。

 [固定定位 fixed]
 1、使用position: fixed; 设置固定定位;
固定定位,是一种特殊的绝对定位!!只是祖先元素无法使用定位锁住;
2、 定制机制:
永远相对于浏览器的左上角进行定位,而且不随滚动条的滚动而滚动;

display 属性

可以设置元素以何种状态显示,可选值:

none: 隐藏元素;
block:显示为块级元素;
 inline: 显示为行级元素;
inline-block: 显示为内联块级元素。 本身将是一个行级元素,但是,拥有块级元素的所有属性。 比如宽度、高度、margin、padding等。。。

[常见的inline-block级别的标签?]
<img /> <input /> <textarea></textarea> <td></td>

[隐藏一个元素的方式]
1、宽度或高度设为0px; 配合overflow:hidden; 属性
2、 display:none; 显示display:block;
3、 opacity: 0; 设为全透明。 但是元素的空间会占据;
 4、 visibility: hidden; 隐藏元素,但是元素所在空间依然会占据。 与opacity: 0;效果很像;
显示visibility隐藏的元素,visibility: visible;

【CSS3 背景属性】
1、background-clip : 设置背景图或背景色的裁切显示区域。
 >>> border-box从边框外缘开始显示;
 >>> padding-box从边框内缘开始显示;
 >>> content-box从文字内容区域开始显示;
 >>> 如果不在显示区域的背景图或者背景色,会被裁切掉不显示;
 2、 background-origin: 设置背景图从哪开始定位。
 >>> border-box: 背景图左上角从边框外缘开始;
 >>> padding-box: 背景图左上角从边框内缘开始;
>>> contentbox: 背景图左上角从文字内容区开始;

3、 background-origin不会改变背景图显示区域的大小,只是决定背景图的左上角从哪里开始定位;
background-clip 只负责裁切出显示区域,但是并不关心背景图定位在哪;
4、 background-attachment: 背景图的附着方式;
>>> scroll: 背景图跟随区域滚动。默认效果;
>>> fixed: 背景图充满整个区域,并且背景图是固定的,不随滚动条滚动;

5、background 缩写形式:
 background:background-color background-image background-repeat background-atachment background-position;

transition: 过渡属性,接受四个属性值

① 设置那个CSS属性,参与过渡; 可以直接指定all/none
② 过渡多少时间完成。 通常 .3s .5s
③ 过渡的样式效果。 通常选ease;
④ 过渡延时几秒后再开始。 可以省略不写;

transition属性可以同时定义多个过渡效果,用逗号隔开。
eg:transition: width .5s ease,height 1.5s ease;

[transform 定义变换属性]

1、常用的变换函数:

>>> translate(10px,10px) 平移,第二个不写默认为0
>>> scale(1.1) 缩放,第二个不写,默认等于第一个
>>> rotate(90deg) 旋转,默认绕Z轴转可以使用rotateX()等
 >>> skew(20deg,30deg) 扭曲,水平、垂直方向扭曲多少度;

2、transform可以同时实现多种变换,用空格分隔
eg: transform: skew(20deg) scale(1.3) translate(100px);

3、transform-origin: 定义变换起点,常用于旋转变换。
可选值: left/center/right bottom/center/top
 也可以直接指定X、Y轴坐标点,第一个数为X轴;

例如:transform: rotate(90deg);
transform-origin:right bottom;
表示:绕右下角旋转90度。