CSS完整笔记

CSS

1,选择器

选择标签用的

2,选择器

2.1 基本选择器

2.1.1 标签选择器

​ 如 p {} div{} .... 会将所有的 p 标签 选上

2.1.2类选择器

​ 如 .class1 {} 会将class="class1"的元素选择上

​ class="class1 class2 class3" 则该元素会有class1,2 ,3的属性 (中间必须有空格隔开)

更加有利于代码的复用性

2.1.3 id选择器

​ #id {} (id不会重复)

​ 会选择id与选择器相同的元素

2.1.4 通配符选择器

​ *{} 选取页面中所有的元素(标签)

​ *{margin: 0 ; padding: 0 ;}

2.2, 复合选择器

​ 复合选择器是建立在基础选择器之上,由多个基本选择器进行组合的.

2.2.1 后代选择器(重要)

​ 用空格表示 某个元素的后面 祖爷爷 爷爷 爸爸 儿子

​ body p{(body里面的所有元素 body是父亲 p 是孩子 对 p以及p以下任意元素都有效果)
background: aqua;
​ }

2.2.2 子选择器
 用 **>** 表示  后面一代的元素(只取p同级的元素)  亲儿子选择器
	body>p{
	  background: red;
	}
2.2.3 并集选择器(重要)

​ p1,p2{} (用逗号相连) 选择p1,p2

2.2.4伪类选择器( : )
1, 伪类链接选择器

按 : link - :visited- :hover- :active顺序写

鼠标放在上面变色

  a:  hover  {
    color: aqua;
  }

鼠标按住未释放

a: active {
color: aqua;
}

没有访问过的

a: link {
color: greenyellow;
}

已经访问过的

  a:  visited {
  	color: greenyellow;
  }
2,focus伪类选择器(光标)

​ 把获取光标的input表单元素选取出来

  		input : focus{ background-color: pink}(谁得到了焦点,谁就改变)
3,结果伪类选择器

​ ul的第一个子li元素

ul li:first-child{
background: red;
}

​ ul的最后一个子li元素

ul li:last-child{
background: green;
}

选择p元素父元素(body)的第n个子元素并且该元素必须是p类元素

p:nth-child( n ){/选择 p元素 父元素 (body)的第n个子元素并且该元素 必须 是p类元素 即p1/
background: green;
}

​ 选择p元素父元素(body)的第n个p类子元素

p:nth-of-type(2){/选择p元素父元素(body)的第n个p类子元素 即p2/
background: red;
}

3, 字体属性

​ 选择器的一个属性

​ 字体 { font-family:'微软雅黑(Microsoft Yahei)',宋体}

尽量使用自带的字体,并且后面可以加上字体(用逗号隔开),如果前面的字体电脑没有,就显示下一个字体

​ 字体大小

​ 字体粗细{ font-weight: 100;}

​ 文字样式:

字体复合:顺序确定,用空格隔开

body{

​ font: font-style(倾斜,正常) font-weight(粗细) font-size(大小,不可省略)/ font-height(高度) font-family(微软雅黑,不可省略) }

4, 文本属性

文本颜色 color: pink / #000000 / rgb(255,0,255) / rgba:0-1 rgba(n ,n ,n ,x(0-A)) X表示透明度

文本对齐方式 text-align: center;相对盒子来说 right文本靠右 left文本靠左 center文本居中

装饰线text-decoration: unline(下划线) line-through(删除线) overline(上划线) none (没有装饰线)

文本缩进 text-indent: 20px(2em); 每段首行缩进20px(2em当前元素两个大小)

行间距 line-height :26px(上间距+文本高度+下间距)

5, 元素的显示模式

​ 显示模式(以什么方式进行显示)

​ HTML分为:块元素,行内元素

5,1 块元素

1 霸道, 独占一行

2 高度, 宽度, 外边距以及 内边距都可以控制

3 宽度默认是容器(父级宽度)的100%

4 是一个容器及盒子, 里面可以放行内或块级元素

注意:

  • 文字类的元素内不能使用块级元素

  • p > 标签主要用于存放文字,因此 p > 里面不能存放块级元素,尤其是 div>

  • h1..h6 都是文字类块级标签,里面不能放其他 块级元素

5.2 行内元素

​ 常见的有 a, strong , b , em , i , del , s , ins , u , span

其中span标签是最典型的行内元素,也叫内联元素

1 一行可以放多个

2 高度, 宽度 直接设置是 无效的

3 宽度默认是本身占有的宽度

4 只能容纳 文本 或者其他 行内元素

注意:

  • 链接里面不能再放链接
  • 特殊情况链接 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全
5.3 行内块元素

​ img , input, td 同时具有块元素和行内元素特点

1 一行可以放多个 但有间隙(行元素特点)

2 高度, 宽度, 外边距以及 内边距都可以控制(块元素特点)

3 宽度默认是本身占有的宽度(行元素特点)

5.4 元素转换

​ 1.行内元素转换为块元素

display :block; 此时行内元素一行只能放一个,并可以设置高度和宽度

​ 2.块内元素转换为行内元素

display: inline; 此时块内元素一行可以放多个,并高度和宽度设置无效

​ 3.转换为行内块元素

display: inline-block; 此时既可以设置高宽,还可以一行放多个元素

6, CSS的背景

​ 元素背景颜色默认是透明的

​ background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

  1. 背景颜色 background-color:

  2. 背景图片 background-image:

  3. 背景图片位置 background-position:X Y;

  • X Y,可以是方位名词(top ,center,left,right,bottom)(顺序无关)
  • X,Y也可以是px值,图片距离块右上角的 x,y距离
  • 还可以混合使用,但顺序不能变

  1. 背景效果 background-repeat:

    repeat(默认背景平铺) | no-repeat(背景不平铺)|

    repeat-x(背景沿着X轴平铺) |repeat-y(背景沿着Y轴平铺) |

    ​

  2. 背景图像固定 background-attachment:s

​ corll(背景图像是随着对象内容滚动)

​ fixed(背景图像固定不动)

  1. 背景颜色半透明

    background:rgba(0,0,0,0.3);(0~1)

7, CSS的三大特性

层叠性: 使用相同的样式,重叠就覆盖(就近原则)

继承性: 子标签继承父标签的某些样式如 文字颜色和字号

优先级: 选择器相同,则执行层叠性;选择器不同,则根据选择器权重执行

​ 复合选择器权重会叠加

8, 盒子

8.1 组成

​ 边框border(边框线),外边距margin(盒子与盒子之间),内边距padding(内容与边框的距离),和实际内容content

​

8.2 边框(border)

会影响盒子大小(盒子大小变成原大小加边框大小,变大了)

​ border-( left(左) / top(顶) /bottom(底)/right(右)) : width style color 可以一次写完

style样式

边框细化 border-collapse:collapse(合并边框 ,不然会相加变粗)

8.3 内边距(padding)

会影响盒子大小(会撑大盒子 原大小加上内边距就是现在盒子大小)

8,4外边距(margin)

margin: auto 盒子居中

行内元素或行内块元素水平居中给他的父类元素添加 text-align:center

嵌套块元素垂直外边的塌陷

​ 可以在父元素定义上(内)边框 或者添加 overflow:hidden

9, 圆角(重点)

border-radius: length(n%);

10, 阴影

10.1 盒子阴影

10.2 文字阴影

11, 浮动

传统网页布局的三种方式: 标准流 浮动 定位

网页布局第一准则: 多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

1.标准流: 标签安装规定好默认方式排序

​ 1. 块级元素会独占一行,从上到下顺序排序

​ * 常用元素: div hr p h1~h6 ul ol form table

	2. 行内元素会按照顺序,从左到右顺序排列,碰到拿到父元素边缘则自动换行

​ * 常用元素 : span a i em 等

2.flout(浮动)

多个块级元素放在一行

float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器

​ 特性: (1) 浮动元素会脱离标准流(脱标,不再保留原来位置,相当于第二层)

​ (2) 浮动的元素会一行内显示并且元素顶部对齐

​ (3) 浮动的元素会具有行内块元素的特性(能设置宽高)

​ 一般将float元素放在标准父元素内,作为子元素在父元素内浮动

2.1 清除浮动

清除浮动: 通常放浮动元素的盒子高度不设,便于添加浮动元素,会自动撑开盒子,但存在一个问题,此时父盒子高度为0,会影响下面的标准流

选择器

清除浮动的方法:

​ (1)额外标签法,也称隔墙法(不能用行内元素)

​ (2)父级元素添加 overflow 属性, 将其属性值设为hidden(常用),auto, scroll.

​ (3)父级元素添加after伪元素

​ (4)父级元素添加双伪元素

12, 定位

定位模式+边偏移

1. 定位模式

相对定位:相对自己原来的位置,但原来位置还占用着(不脱标)

绝对定位:没有父元素或者父元素没有定位 ,则以浏览器为标准定位

​ 如果父元素有定位则以最近的有定位父元素为准,进行定位

​ 绝对定位不占有原来位置(脱标)

盒子: 水平居中 left:50%(父容器宽度的一半)

​ margin-left:-自己宽度的一半;

固定定位:固定在页面某个位置,不随着页面滚动而动

​ 以浏览器可视窗口为参照点移动元素元素

​ 不占由原来的位置(脱标)

粘性定位(sticky): 是相对定位和固定定位的混合

​ 选择器{ position: sticky;top:10px;}

​ 1.以浏览器的可视窗口为参照点移动元素(固定定位特点)

​ 2.粘性定位占有原来的位置(相对定位特点)

​ 3.必须添加top,left....中的一个

2. 边偏移

3. 定位叠放次序

选择器{ z-index: 1;} 数值越大,盒子越靠上

​ 注意:

  1. 行内元素添加绝对定位或者固定定位,可以设置高度和宽度

  2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认是内容大小

    1. 浮动盒子不会压标准流盒子里面的文字,只会压住他下面标准流的盒子,

      但绝对(固定)定位会压住下面标准流所有的内容

13, 显示和隐藏

1. display

​ display:none;

​ 隐藏元素后,不在占有原来位置

2. visibility

​ 占有原来位置

3. overflow(溢出)

posted @ 2021-05-22 21:05  沉寂之地  阅读(85)  评论(0)    收藏  举报