CSS 简单归纳 — 前端知识

CSS:cascading style sheets层叠样式表,用于美化页面

css的三种表现形式:

1、行内样式(内嵌样式):结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中;
<标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记>
2、内部样式(内联样式):写在HTML页面内部,存放于head标记当中,样式写在style标记内;
注意:style标记不要写在title标记上方;
<style>
选择器 {
属性名:属性值;
属性名:属性值;
......
}
</style>
3、外部样式(外联样式):写在css文件内;
<link type="text/css" rel="stylesheet" href="css/main.css" />

color:设置文本颜色;

属性值:1、表示颜色的英文单词,例如:red、blue、green、pink、purple、cyan等;
2、十六进制表示法:#ff0000; 0、1、2...9、a、b、c...f
# ff 00 00
红色 绿色 蓝色
0表示颜色的最低值,f表示颜色的最大值;
3、rgb表示法:color:rgb(0,0,0);取值0-255;
4、rgba表示法:color:rgba(0,0,0,0);前三个值的取值0-255,第四个值的取值0-1;
a--alpha

font-family:设置字体格式;可以设置多个字体格式,之间用“,”隔开,字体格式用“”包含;

font-size:设置字体大小,单位像素(px);

font-style:设置字体样式
normal--正常的,没有任何样式;
italic--斜体字;只有字体本身有斜体才能倾斜,否则不能倾斜;
oblique--倾斜的;可以强行倾斜字体;

font-weight:设置字体字重,即字体的粗细;
100-900取整百,700相当于粗体(bold),900相当于更粗(bolder);
bold--粗体
bolder--比粗体更粗;
lighter--细体;

选择器:选择对应的标签,将样式给到对应的标签

1、标签选择器:给同一种标签添加样式;
代码:
标签名 {
属性名:属性值;
}

2、通用选择器(通配符):给所有的标签添加样式;
代码:
* {
属性名:属性值;
}
注意:通用选择器是先遍历页面当中所有的标签,然后再给这些标签添加样式,所以这个选择器的性能非常低;一般只会在测试的时候使用,用于css的初始化,但是在项目当中不要使用;

3、类选择器:给同一类(同一个群体)标签添加样式;要先给同一类标签取一个名字;
属性--class给标签命名类名;
代码:
.class名(类名){
属性名:属性值;
}
注意:一个类名可以给多个标签,一个标签可以有多个类名,多个类名之间用“空格”隔开;

4、id选择器:给某一个标签添加样式;要先取一个id名
属性--id;
代码:
#ID名 {
属性名:属性值;
}
注意:一个ID名只能给一个标签,一个标签只能有一个ID名;(从一而终)

5、后代选择器:选择的是某一个元素的后代元素;
代码:
祖先选择器 后代名 {
属性名:属性值;
}
注意:中间是用“空格”连接,表示“里面的”意思;

选择器原理:是由内向外查找,先查找所有的p,然后判断这个p是否由满足要求的父节点father,不满足就继续向上一级查找,没有找到就不满要求,找到了才给这个p添加样式;

6、子选择器:选择某个元素的直接后代;
代码:
父选择器>子级{
属性名:属性值;
}

7、相邻兄弟选择器:选择紧挨着该元素的后面的一个元素;
代码:
元素名+兄弟名{
属性名:属性值;
}

8、通用兄弟选择器:选择的是该元素后面的所有的某一种元素;
代码:
元素名~兄弟名{
属性名:属性值;
}

9、并集选择器:将两个不相干的元素同时添加相同属性;
代码:
元素1,元素2,元素3......{
属性名:属性值;
}

10、交集选择器:当标签和类名(ID名)都冲突的时候,使用交集选择器;
代码:
元素名.类名(#ID名){
属性名:属性值;
}

css三大特性:

1、继承:父级的样式会被子级继承;!important不会被继承;

2、层叠:当样式发生冲突的时候,样式会产生覆盖(层叠);

3、优先级:!important(最高级)>行内样式>id>类>标签>*>继承;
同级样式遵循“就近原则”;就近指定是谁离内容进谁的优先级就高;

权重:标签选择器

类选择武器--10
id选择器--100
行内样式--1000
!important--1/0(无穷大)
数标签:先数id,比较完id再数类,比较完类再数标签;

盒子模型:

1、内容--宽度:width;单位px、百分比(继承)、em、rem;
高度:height;单位px、百分比(继承)、em、rem;
背景--背景色:background-color;颜色单词、十六进制表示法、rgb、rgba;
背景图片:background-image:url(路径);
背景图片重复:background-repeat;no-repeat(不重复)、repeat-x(水平重复)、repeat-y(垂直重复)、repeat(水平垂直重复、默认);
背景定位:background-position:left、center、right、top、center、bottom、具体的数值(单位px)
背景连写:background:背景颜色 背景图片 背景图片重复 背景定位;可以只单写某一个属性;

2、填充:上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充连写--padding:1个值--》上、右、下、左全部是这个值;
2个值--》第一个值表示上下,第二个值表示左右;
3个值--》第一个值表示上,第二个值表示左右,第三个值表示下;
4个值--》依次为上、右、下、左;(顺时针方向)
注意:padding会改变盒子的大小,要想在添加padding的同时保持盒子的大小不变,应将padding的值从盒子的大小中减去;

3、边框:边框粗细--border-width
边框颜色--border-color
边框样式--border-style:solid(实线)、dashed(虚线)、dotted(点线)
边框连写--border:width style color;
可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right
注意:边框的对齐方式为向外对齐,所以边框会改变盒子大小;

4、外边距:上边距--margin-top
下边距--margin-bottom
左边距--margin-left
右边距--margin-right
外边距连写--margin:1个值 2个值 3个值 4个值(参照padding);

默认文档流布局下,父子上边界共用问题?

解决:1、使用padding;
2、给父级使用border;
3、给父级添加属性--overflow:hidden;
4、浮动;
5、定位;

外边距塌陷:在垂直方向上上下边距会合并,取最大值;

盒子水平居中:margin:0 auto;

样式的继承:width、color、font-、text-、line-height都可以被继承;

<ins></ins>下划线标记

<del></del>删除线标记

文本修饰:text-decoration--underline;下划线
line-through;删除线
none;无/没有修饰;

文本对齐:text-align--left;左对齐
center;居中对齐
right;右对齐

文本缩进:text-indent;指的是文本的首行缩进;
单位px、em;

行高:line-height--用于设置一行文本的高度,常用于设置一行文本在容器当中垂直居中;
单位:1、px;
2、百分比;基于文字大小的百分比,“%”前必须是整十,如:150%、200%
3、em;相对单位,同样是基于文字大小;如:1.5em、2em;
4、没有单位;a--没有继承的情况下,相当于em;
b--在有继承的情况下:
i、父级的行高有单位em,则会先计算好行高,然后将行高的数值直接继承给子级,子级本身不会再计算行高;
ii、行高没有单位,则父级会直接将行高继承给子级,然后子级根据行高值自行计算行高;

font连写--font:样式/粗细 大小 格式;大小和格式必须都有,缺少任何一个都不行;

元素的显示方式:

1、块级--block;独占一行,支持宽高;
2、行内--inline;和其他行内元素在一行显示,不支持宽高;
3、行内块级--inline-block,既有行内元素特性,又有块级元素的特性;同样在一行中显示,并且支持宽高;
display:block/inline/inline-block;
以上为默认文档流(标准文档流)下的情况;

在有链接的情况下,a标记无法继承父级的color样式;

伪类选择器:

a:link--链接的原本的样式(没有访问过);一旦访问过后就失效;
a:hover--鼠标移入时的样式;
a:active--鼠标按下时的样式(鼠标没有松开);
a:viseted--链接访问过后的样式;
L--H--V--A

浮动:让默认(标准)文档流下的元素漂浮起来水平排列;
float--left左浮动;
right右浮动;
none不浮动;
浮动排列的顺序不会改变,默认时谁在第一个,浮动就会排在第一个;

浮动的影响:

1、行内元素浮动之后可以支持宽高;
2、文本会给浮动的元素让位;可以制作文本绕排的效果;
3、在父级没有给高度的情况下,子级浮动后父级会没有高度;

清除浮动:

1、在父级内容的最后添加一个空的div,添加clear属性;
clear--left清除左浮动;
right清除右浮动;
both清除所有(左/右)浮动;
clear是清除上一个元素带来的影响;
不推荐使用,因为会在页面上添加太多的无用标签,让页面的布局变得更复杂;

2、给父级设置overflow:hidden;
会触发bfc(block formatting context)块级格式化上下文;
不推荐使用,因为这个属性和定位一起使用时会产生问题;

3、使用伪元素after
.clearfix:after {
content:"";/*内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*块级元素*/
visibility:hide;/*隐藏*/
clear:both;/*清除浮动*/
}
.clearfix {
zoom:1;/*IE678*/
}

4、使用双伪元素after和before
.clearfix:afer,.clearfix:before {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
以上四种方式推荐使用第三种;

列表样式:list-style

定位:
1、静态定位--static;按照标准文档流进行布局;

2、相对定位--relative;相对自身;以自身的坐上角(坐标点)为参考;会保留原来的位置不被其他元素侵占;

3、绝对定位--absolute;参考的是页面的左上角;绝对定位位置不会被保留;
如果父级有定位,则参考父级的坐标点;如果父级没有定位,则会一级一级向上查找,直到html标签,中途有定位就会参照这个定位元素的坐标点;

4、固定定位--fixed;相对于浏览器窗口的左上角;

版权声明

作者:小太阳xdq
来源:CSDN
原文:https://blog.csdn.net/weixin_44045029/article/details/88405347
版权声明:本文为博主原创文章,转载请附上博文链接!

本文章由 brokenway 发布在 个人知识库 ,文章所述不代表本站观点,法律风险由发布者自行承担,转载请注明出处!
(0)
brokenway的头像brokenway
上一篇 2019年3月15日 09:42
下一篇 2019年3月16日 14:39

相关文章