web前端学习笔记《四》-CSS

最新推荐文章于 2024-02-01 10:22:13 发布

苏格

最新推荐文章于 2024-02-01 10:22:13 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/gong3244966/article/details/104535132

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	浏览器
	组成部分
	shell   内核    渲染rendering引擎/JS引擎
	
	Google chrome    webkit
	Safari     		 webkit
	firefox   		 gecko
	IE	      		 trident
	opera     		 presto   360和昆仑万维

	CSS cascading style sheet  层叠样式表


	<style type="text/css"></style>内部样式表
	<link rel="stylesheet" type="text/css" href="css/index.css">外部样式表

	css的权重 内联样式;内部样式表;外部样式表
	后面加!important表示提高权重

	id选择器是用#box
	class选择器用.box1
	标签选择器直接用标签名，例如div
	*即所有标签选择器 通配符选择器
	属性选择器 [id="box"]{}    [id]{} 
	兄弟选择器 同父级 相邻，在其之后    checked + label

	派生选择器父级下的标签

	id > class | 属性选择器 > 标签 >*通配

	css权重值

	*        0
	标签，伪元素    1
	class，属性，伪类  10
	id       100
	内联样式    1000
	！important   正无穷
	<div id="box" class="box1"></div>
	
	.box{}
	.box.box1{}
	<div class="box box1"></div>

	先写样式，封装样式类。根据文本提示样式类来写。

	bootcss可以借用来快速开发css样式

	CSS的API
	css.doyoe.com
	css.doyoe.com/css.chm

	transparent  透明
	
	1em=16px*1
	用em来设置倍数


	cursor  光标样式！

	单行文本截断和显示省略号的三大件
	white-space：nowrap
	overflow-x：hidden
	text-overflow：ellipsis


	内联块 inline-block   横向一排
	内联 inline
	块  block        
	用display改变元素级

	:frist-child 
	:last-child   同父类里面的相同元素
	:nth-child(4)   第几个元素

	容器内多行文本居中
	容器的display设置为table
	display设置为table—cell
	vertical-align:middle
</body>
</html>