前端笔记 day1/5 css样式

css标记

class类

类名可以重名
表示方法.类名

<div class="类名"></div>
<div class="div1"></div>
<div class="div2"></div>

id编号

id具有唯一性
表示方法#id名

<div id="div1"></div>

样式

字体颜色color

color:字体颜色
#(0-9 a-f6位组合)

.h1{/*为h1类设置字体颜色*/
	color:#123456;
	color:red
	/*有效颜色为#和0-9 a-f的6个字符组成*/
}

字体大小 font-size

.h1{
	font-size:16px;/*字体大小 单位是像素*/
}

字体粗细font-weight

• lighter:细
• bolder/bold:粗

.h1{
	font-weight:lighter
}

字体风格font-style

• italic:斜体
• normal:普通

.h1{
	font-style:normal;
}

字体font-family

.h1{
	font-family:"微软雅黑";
}

位置text-align

• left默认 靠左
• center 居中
• right 靠右

文本修饰 text-decoration

• none:啥也没有
• line-through:删除线
• overline:上划线

<style>
a{
	color:#000;
	text-decoration:none;
}
</style>
<!--以上为head中代码
以下为body中代码-->
<a href="地址"></a>

首行缩进text-indent

.h1{
	text-indent:5px;
}

字体阴影text-shadow

.h1{
	text-shadow:5px 5px 5px red;
}

溢出隐藏text-overflow

宽高

.h1{
	width:400px;
	height:400px;
}

垂直居中line-height

只适用于仅有一行文字

.h1{
	line-height:400px;/*行高垂直居中*/
}

边框border

• 线的宽度
• 线的类型:solid 实线 dashed 虚线 dotted点线
• 线的颜色
• border-top:上边的线
• border-right:右边的线
• border-bottom:下边的线
• border-left:左边的线

.h1{
	border:2px soild red;
}

行内外转换

• 块元素转换为行内元素:inline
• 行内元素转换为块元素:block
• 隐藏元素:none

div{
	display:line
}
span{
	display:block;
}
p{
	display:none;
}

浮动

是会脱离文档流的 不占位

<style>
*{
	margin:0;
	padding:0;
}
ul,ol{/*ul和ol*/
	list-style:none;/*去掉列表样式*/
	float:left;
}

ul li{/*ul下的li*/
	width:100px;
	height:100px;
	backgroud:pink;
	float:left;/*一般采用左浮动*/
}
</style>

<ul>
	<li>11</li>
	<li>22</li>
	<li>33</li>
</ul>
<span>sssss</span>

清除浮动:
给浮动元素的父元素具体宽高
浮动元素的同级标签或该标签设置clear:both;

定位position

想让他在哪他就在哪里 不占位

• 相对定位relative 要有包含关系
• 绝对定位absolute
• 固定定位fixed 固定在一个位置

<style>
#warp{
	width: 100%;
	height: 100%;
	background: yellow;
	position:relative;
}
.top{
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	right: 10px;
}
.center{
	width: 100px;
	height: 100px;
	background: #342234;
	position: absolute;
	left: 10px
}
.bottom{
	width: 100px;
	height: 100px;
	background: #099330;
	position: absolute;
	left: 40%;
}
body{
	height: 2000px;
}
.box{
	background: red;
	position: fixed;
	right:20px;
	bottom: 50px;
}
</style>

<div id="warp">
		<div class="top">上</div>
		<div class="center">中</div>
		<div class="bottom">下</div><!--固定在页面-->
		<div class="box">go back</div><!--固定在屏幕-->
	</div>

上述代码实现之后发现外边warp的背景颜色不见了 是因为里边三个小盒子都绝对定位了(定位不占位) 所以外边大div的宽高都变为0了 所以看不到背景颜色了

伪类选择器

::before或::after在元素前或后加元素

.top::before{
	content:"*";/*内容是星号*/
	color: red;
	margin-right: 10px;
	font-size: 20px;
}

找子元素

• 用空格寻找子元素:寻找所有子元素 包括孙元素

#warp div{
	background:red;
}

• warp>div: 只找子元素, 孙元素不行

#warp>div{
	background:blue;
}

盒模型

width+padding+margin+border

• padding: 内边距
  一个值:上下左右都是那个值
  两个值:上下一个值 左右一个值
  四个值:上右下左顺序分配四个值

• margin: 外边距 规律同padding

• padding. border. margin三者的位置关系
  

页面布局

布局原则

• 从上到下
• 从左到右
• 从外到里