CSS重温笔记

发布于 2022-08-07  102 次阅读


一.基础

CSS的三种形式
内嵌式

<head>
    <style>
    </style>
</head>

外链式

<head>
    <link rel="stylesheet" href="" />
</head>

行内式

<div style=""></div>

选择器有3种
类选择器:
.one ,这里第一个不能用数字或者是“-”开头,多个类名用空格分开,比如

class="A B"

ID选择器:

#one ID选择器主要用来配合JS来找标签用的,在行内用id=“one”来实现,注意,这个id名字不能重复,在页面中是唯一的(否则js中出错概率很高。)

通配符选择器:
适用于全局属性,比如我们常见的

*{
margin:0
}

关于字体相关的

font-size字体相关的大小,一般是数字+px
font-weight字体的粗细,有2种形式,一种是英文(normal和bold),一种是直接用数字(400就是正常的normal,数字区间是1-900)
font-style字体是否倾斜,有2种形式,一种是normal正常,一种是italic表示倾斜。
font-family表示字体,可以这里写多个方便展示,如果存在就默认用第一个,没有就一次往后取用。
text-indent表示段落前面空字,可以用数字px也可以用数字em(推荐用em,em是表示当前font-size大小)
text-align表示文字的位置(当然他也可以用于文本、span、a、img、input上面),有3个情况,left、right、center
text-decoration字体修饰,有4个情况,常用的是underline(下划线)、none(没有装饰线),不常用的有line-through(删除线)、overline(上划线)
line-height行高(上间距+字高+下间距),一般可以用数字+px 和 位数(font-size)的数值
我们也可以将这些关于font的写在一起,格式是font:style weight size/line-height family(注意,这几个不可换顺序)

margin相关,后面可以接4个,写四个就是上右下左,写三个就是上右下(左边取右边的等值),写2个就是上下+左右,写1个就是全部都取

二.进阶(UPUP)

几个选择器

div p{}; 后代选择器
div>p{};子代选择器
div,p{};并集选择器
p.box{};交集选择器
:hover{}伪装选择器(鼠标悬浮)

背景相关的

background-color:red;背景颜色
background-image:url('');背景图片
background-repeat:repeat/no-repeat/repeat-x/repeat-y;背景平铺否(平/不/沿X去平铺/沿Y去平铺)
background-position:left/right/center/top/center/bottom.....;背景的位置

这里需要注意,我们插入图片的时候,直接用img标签,不用css的效果实际就是图片的完整显示效果,用div包裹的话取决于div的大小。
我们也可以background参数连写,遵循:

background:color image repeat position 格式不分先后顺序

元素显示模式

display:block;          块(用的多)
display:inline-block;   行块(用的多)
display:inline;         行内

特别注意,我们在标签元素嵌套的时候:
1.P中不要嵌套div、p、h块级别;
2.a中不能嵌套a

CSS特性:

1.继承性(文字的控制属性都可以继承的)
特殊情况:【简称:我有我就不会要你的】
1.a标签的color会继承失效;
2.h标签中的font-size会继承失效

2.层叠性
都作用在不同的样式上面(叠加)
都作用在相同的样式上面(谁后面听谁的)

3.优先级
顺序原则上是:
继承<通配符<标签<类<ID<行内<!important
(简称:谁的范围越广,谁的优先级越低)
!important一般开发中很少用
他不能提升继承的优先级。
计算原则:
(0,0,0,0),行内/ID/类/标签,这个比较的顺序不可改变
如果都一样,则样式谁在下面听谁的。
如果都是继承,继承中优先级谁高听谁的。

盒子模型:
content内容、padding内边距;border边框线;margin盒间距

border:10px solid red; 像素 线条种类 颜色(不分先后顺序的)

线条种类有:solid实线、dashed虚线、dotted点线

盒子模型自动计算边距使用的代码(适用于各项边距数值都有,又懒得去挨个计算的)

box-sizing:border-box

清楚浏览器默认的样式我们用:(常用代码,基本cv即可)

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

解决塌陷现象我们用

overflow:hidden

伪元素(一般用在装饰性元素上面)

::before
::after

注意:
1.这个必须有content属性才能生效
2.这个需要找父级去创建子级的标签

浮动

float
控制几个一起

right li:nth-child(n){

}

清除浮动:
1.给父级增加高度标签;
2.给父级增加块元素,在块元素中设置clear,属性为both
3.单伪(一般情况cv即可):

clearfix::after{
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;(为了兼容浏览器,建议加上,同时也可以隐藏伪装)
}

4.双伪(一般情况cv即可,实际场景多用这个)

clearfix::before
clearfix::after{
    content:"";
    display:table;
}
clearfix:after{
    clear:both;
}

5.overflow属性为hidden

网页布局是由标准流、浮动、定位配合完成的。

定位

postion
方式:设定属性名position,可以为static(静态)、relative(相对的)、absolute(绝对),fixed(固定)