笔记 选择器 样式优先级 常用css3

Posted 2021-04-09 娜娜lock

1.选择器优先级

通配符选择器

*{margin：0；padding：0；}

基本优先级排列

id > class > div >通配符选择器

优先级相同的元素后面覆盖前面

tagName 

2.后代选择器优先级的多种情况

/*

1.当id个数不等时候，id多的优先级高  2.当id个数不等时候，就比class个数

3.class个数相等时，就看元素选择器个数

选择器基本原则： 精准控制元素

!important； 可以增加优先级 但是不能经常用

div{width:10px !important;}

*/

3.样式优先级

内部样式

常用于单个页面

div{width:;}

行内样式

本地调试用的多，优先级最高

<div style='width:;'></div>

外部样式

企业常用 后期好维护

css文件

@charset 'UTF-8';

引入标签

<link rel='sylesheet' type='text/css' href='css/index.css' />type可以不写 href是指路径 放在head里

@import'css/index.css'；  导入式用的不多  必须要在style标签第一行  所有网页装载完之后才出现 网页较大时候 会出现闪烁，无样式情况。

行内样式>内部样式=外部样式

4.常用css3样式

圆角：boder-radius 不兼容IE7可以改用图片

四个值：左上  右上  右下 左下（顺时针）

三个值：左上  右上左下  右下

二个值：左上右下   右上左下

一个值：所有角都一样

border-top-left-radius:左上角

border-top-right-radius:右上角

border-bottom-left-radius:左下角

border-bottom-right-radius：右下角

border-radius：50%；圆形

阴影：box-shadow:

5px   5px  20px  20px       red;

水平 垂直  模糊  阴影大小   颜色

多个值的写法：

box-shadow:0 0 10px 10px red,0 0 20px 20px orange;中间用逗号隔开

 

/*阴影

h-shadow 水平偏移量。允许负值 （ 必需） 

v-shadow 垂直偏移量。允许负值 （必需）

blur 模糊半径 （可选。） 

spread 阴影的大小 （可选。） 

color 阴影的颜色 （可选。） 

outset 外部阴影 （默认） 内部阴影（inset可选 ）

*/

5.溢出隐藏：规定溢出元素如何隐藏

overflow:hidden；  隐藏值

overflow：visible；默认值

overflow :scroll;溢出出现滚动条

overflow：auto；根据内容来决定，内容超出出现滚动条，左右上下也都可以出现滚动条

overflow-x：hidden；

overflow-y:hidden;单独定义水平/垂直方向如何显示

white-space:nowrap;强制单词不换行

text-overflow:ellipsis;文字溢出出现省略号

overflow:hidden;溢出隐藏

这三个一起用会让文字溢出隐藏

行内元素不适用

background-size:cover;

背景大小自动跟盒子一样大

vertical-align:middle;两者并列持平，两个元素后面都放才有用。