CSS学习笔记【2】

上集

CSS

2 CSS选择器

2.3.4 伪类选择器

  • 选择到元素的某个时间点（段），用来添加一些选择器的特殊效果。
  • 伪类的语法：
selector:pseudo-class {property:value;}
  • CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
  • Anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
  1. :hover{} 鼠标悬停，添加样式
	a:hover{
		background:red;
		color:yellow;
	}
  • 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
  1. :active{}被点击时，添加样式
	a:active{
		background:black;
		color:white;
	}
  • 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
    【实例】
	h1:hover{
		background: red;
		color: yellow;
	}
	div:active{
		background: black;
		color: white;
	}
  • 伪类前面可以使用任何选择器
  • :hover, :active可以作用于任何元素
  1. :link{}
	a:link{
		background: yellow; 
		color: pink;
	}
  • 超链接未被使用时（href指定的页面没有被访问过），添加样式
  1. :visited{}
	a:visited{
		background:blue;
		color:gold
	}

  • 超链接被使用过后（href指定的页面被访问过），添加样式

  • :link{},:visited{}只能作用于超链接

  • 当四个伪类同时作用与一个a标签上时，必须按照以下的顺序，否则有的伪类会失效

	:link  :visited  :hover  :active 
	（LoVe & HAte）

2.3.5 伪元素选择器

  • 语法：
selector:pseudo-element {property:value;}
  • CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
  1. :first-line伪元素
    "first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}
  • "first-line" 伪元素只能用于块级元素。
  1. :first-letter伪元素
p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}
  1. :before伪元素
  • ":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个h1元素前面插入一幅图片：

h1:before 
{
    content:url(smiley.gif);
}
  1. :after 伪元素
    ":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个h1元素后面插入一幅图片：

h1:after
{
    content:url(smiley.gif);
}

【拓展】

  • 1 伪类
    伪类选择元素基于的是当前元素处于的状态，
    或者说元素当前所具有的特性，而不是元素的id、class、
    属性等静态的标志。由于状态是动态变化的，所以一个元
    素达到一个特定状态时，它可能得到一个伪类的样式；当
    状态改变时，它又会失去这个样式。由此可以看出，它的
    功能和class有些类似，但它是基于文档之外的抽象，
    所以叫伪类。

  • 2 伪元素
    与伪类针对特殊状态的元素不同的是，伪元素是对元素中
    的特定内容进行操作，它所操作的层次比伪类更深了一层，
    也因此它的动态性比伪类要低得多。实际上，设计伪元素
    的目的就是去选取诸如元素内容第一个字（母）、第一行，
    选取某些内容前面或后面这种普通的选择器无法完成的工
    作。它控制的内容实际上和元素是相同的，但是它本身只
    是基于元素的抽象，并不存在于文档中，所以叫伪元素。

3 CSS布局

3.1 尺寸

  1. width height
  • 【块元素】、【行内块】设置宽高有效
  1. 单位：最常用px 像素
  • 绝对长度：cm m
  • 相对长度 px（根据屏幕分辨率产生变化）

3.2 越界

  • 【问题】当子元素的尺寸超过父元素时，就会产生越界，
  • CSS overflow 属性用于控制内容溢出元素框时显示的方式。
  • 【解决】给父元素添加overflow，控制越界部分
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会产生滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
	scroll    产生横向纵向两条滚动条，不管有没有越界部分
	auto     当有越界部分是产生滚动条，没有则不产生
  • 注意:overflow 属性只工作于指定高度的块元素上。

3.3 边框

  1. 四个方向的边框统一设置
  • 1px--边框粗细
  • solid--边框样式 实线--必要属性值，如果不添加就没有边框
  • dotted--圆点虚线
  • dashed--虚线
  • double--双线
  • green--边框颜色
  1. 单独设置一个方向的边框
  • border-top
  • border-right
  • border-bottom
  • border-left
  1. 三个方向边框都一样，只有一个边框不同
	div{
		border: 1px solid;  先设置四个方向边框（相同样式），再单独设置不同边框
		border-left: 1px solid red
	}

【注意】边框多个属性值排列
border-style：属性1，属性2，属性3，属性4
上->右->下->左

border-style：属性1，属性2，属性3
上->左右->下

border-style：属性1，属性2
上下->左右

border-style：属性1
上下左右属性相同

  • 【注意】border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
	p.one
	{
		border-style:solid;
		border-color:red;
	}
	p.two
	{
		border-style:solid;
		border-color:#98bf21;
	}
  1. 边框圆角
  • border-radius
    -【如何做一个圆】
      1. 先做一个正方形（宽高一致）
      1. 设置边框圆角50%
  1. 盒子模型
  • 【边框简写】
  • 上面的例子用了很多属性来设置边框。也可以在一个属性中设置边框。
  • 在"border"属性中设置：
border-width
border-style (required)
border-color
【实例】
border:5px solid red;

盒子模型

  • 蓝色部分---内容

  • 绿色部分---padding 内边距

  • 黄色部分---border 边框

  • 土黄色部分---margin 外边距

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。

  • Content(内容) - 盒子的内容，显示文本和图像。

【面试题】
元素width:100px height:50px padding:10px border:1px solid margin:20px
求元素面积？
【解答】
长：100+20+2+40 = 162px
宽：50+20+2+40 = 112px 面积=长*宽

【注意】基本的清除固有样式模板

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

3.4 margin 外边距

  • 块标签上下外边距有效
  • 行内标签上下外边距无效
  • 行内块标签上下外边距有效，而且让一行里的行内元素上下外边距也有效

问题：外边距溢出

  • 定义：子元素div添加上外边距，移动的却是父元素div
  • 【解决办法】：

    1. 给父元素加上边框。弊端：增加了父元素实际占据高度

    2. 给父元素添加上内边距。弊端：增加了父元素实际占据高度

    3. 给父元素设置 overflow:hidden/auto 。弊端：元素如果想溢出显示，就冲突了

    4. 把子元素变成行内块元素 display:inline-block 。弊端：改变了子元素的显示模式

    5. 在该子元素的前面，添加一个空的元素，比如

      </table> 弊端：添加无意义标签，结构化差

    6. 利用父元素的伪类 before 添加一个空 table 元素（推荐使用）

      7. 	#parent::before {
	content:"";
	display:table;
	}

      问题：如何让块元素在父级元素中水平居中？

      1. 行内元素：text-align:"center"
      2. 块元素：margin: 0 auto - 上下无外边距，左右自动居中
      • 上下外边距设计，左右自动居中：
      	margin: 10px auto
posted @ 2021-06-24 19:20  Teddyonthebench  阅读(42)  评论(0)  编辑  收藏  举报