CSS语言基础|青训营笔记

·这篇笔记是css课程内容总结，对自己来说算是复习，结合了以前自己写的一些简单css实验

链接方式

外链 <style type="text/css">

嵌入 <link rel="stylesheet" type="text/css" href="111111.css">

内联 <div id="did" style="margin: auto;">

选择器

作用：找出页面中元素，设置样式。

选择方式：标签名、类名、id、属性、DOM相对位置

基本选择器

通用选择器：*{font-size:12px} 用于匹配所有元素类型.

标签选择器：p{font-size:12px}

类选择器：.classname{} 选择器定义:<div class="classname">......</div>

ID选择器：#myid{}

css 复制代码

body{
    background-color: beige;}
.TTT{
    background-color: aliceblue;
    width: 900px;
    overflow-x: hidden;
}
#jianjie{
    position: relative;
    left: 370px;bottom: 600px;
}

组合选择器

名称	语法	说明	实例
多元素选择器	A,B	同时选中AB	`p,div,......{}`
后代选择器	A B	选中B，B是A的子孙	`p div{}`
亲子选择器	A>B	选中B，B是A的子元素	`p>div>......{}`
兄弟选择器	A~B	选中B，在A后且和A同级	`p~div{}`
相邻选择器	A+B	选中B，B紧跟在A后	`p+div{}`

伪类

不基于标题和属性定位元素

分类：状态/结构性伪类

例如：
a:link{......} 向未被访问的链接添加样式，仅适用于超链接
a:hover{......} 当鼠标悬浮在元素上方时添加样式

颜色表示

六位字符： #8fac87

RGB表示：rgb(143,163,128)

HSL表示：hls(......,......,......)

alpha透明度：值为1时不透明。

特异度

权重大小：行内样式>ID>class/属性/伪类>类型/伪元素

继承

某些属性会自动继承父元素计算值，除非显示指定一个值。

布局

常规流：行级，块级，表格，FlexBox，Grid布局
浮动：float/clear
绝对定位：absolute

盒子模型

属性

width

指定content box宽度
取值为长度、百分比、auto（由浏览器根据其他属性决定）
百分数相对于容器的content box宽度

hight

指定content box高度
取值为长度、百分比、auto（由浏览器根据其他属性决定）
百分数相对于容器的content box宽度
容器有指定的高度时，百分数才生效

padding

指定元素四个方位的内边距
百分数相对于容器宽度

border

设置边框样式，粗细，颜色

margin

指定元素四个方位的外边距
取值为长度、百分比、auto
百分数相对于容器宽度

块级与行级

块级：不和其他盒子并排摆放，适合所有盒模型属性。
行级：可以和其他行级盒子一起放在一行或多行，width,height不适用。

FlexBox布局

一种新的排版上下文，可以控制子级盒子摆放流向、摆放顺序、盒子高度宽度、水平垂直方向的对齐、是否允许折行。

集中对齐方式

Flexibility

可以设置子项弹性：容器有剩余空间时会伸展，空间不够时会收缩。

flex-grow:有剩余空间时的伸展能力。

flex-shrink:容器空间不足时的收缩能力

flex-basis:没有伸展或收缩时的基础长度

Grid

先确定网格线

自己写的一点页面

xml 复制代码

               <style type="text/css">
			div{
				position: relative;top: 150px;
				padding: 40px;width: 600px;
				margin: auto;border: 3px;
				border-style: groove;border-color: cornflowerblue;	
			}
			
		</style>
           //html部分，涉及到js内容就不放了
                <div>
			<p>素数蓝色，非素数粉色</p>
		    <script>
			    document.write(calc100());
		    </script>
		</div>

总结

CSS中选择器是运用css美化页面的基础，例子不全，还需要我们自己动手尝试，不断积累不同的写法和功能。

盒子模型是CSS的基础内容，在排版和内容布局中必不可少。除此之外其他的布局方法，比如Grid布局，在网页设计中应用广泛。

利用css可以写出很多动画效果，甚至可以实现计时器等功能，需要我们多多学习、实践。