02_CSS

CSS

层叠 样式表
css文件后缀为.css
css目的就是让网页变得更加美观

语法

h1为选择器，里面的为声明，可以是多个声明
前期可以写到style里面（style在head里面），后期单独创建后缀为css的文件

<style>
	h1: {
			color:red;
			font-size:12px;
	}
</style>

一个属性
一个值

CSS的引入方式

内联样式

<p style="font-size: 60px; color: blue;">我是一个段落标签</p>

内部样式

<style>
	h1: {
			color:red;
			font-size:12px;
	}
</style>

外部样式

新创建一个独立的后缀名为.css的文件，在index-head里面用

<link rel="stylesheet" href="">

Selecter

全局选择器

优先级最低，一般做样式初始化

*{
	margin: 0;
	padding: 0;
}

通配符，全部

元素选择器

HTML文档中的元素p、b、div、img、a等

p{ font-size: 50px; }

类选择器

先给目标语句添加类名class

<p class="pwd content inside">这是一段话</p>

class可以有多个，中间用空格隔开

.类名{ color: blue; }

ID选择器

<span id="word">这是一段话</span>

#word{ color: yellow; }

特点：id选择器，id唯一

合并选择器

相同的内容，可以写在同一个里面，中间用逗号隔开

p, span, h1{ color: blue; }

.p, .span, .h1{ font-size: 90px; }

#p, #span, #h1{ font-size: 50px; }

选择器优先级

标签不一样的话优先级从高到低：行内 > ID > 类 > 元素

标签一样的话最下面的优先级高

关系选择器

后代选择器

ul li{ color: blue; }

ul下的所有li都生效

子代选择器

子代选择器，只对div下的所有直接子元素a生效，用>连接。

div>a{ color: yellow; }

相邻兄弟选择器

用于相邻的相同级别的元素使用，用+连接。

p + div{ color: chocolate; }

只对下面相邻的一个兄弟生效，自身不生效。

通用兄弟选择器

作用于元素之后的所有同级元素，用~连接。

字体属性

color 颜色

blue，rgb，#00ff00，rgba

font-size 字体大小

多少多少px

font-weight 字体粗细

bold，bloder，lighter，100~900（由粗到细，400默认）

font-style 字体样式

normal，italic斜体

font-family

微软雅黑

背景属性

分类

background-color	设置背景颜色
background-image	背景图片
background-position	背景图片显示位置
background-repeat	背景图片填充方式
background-size	大小属性

background-image

路径参考HTML5路径信息

background-image: url("路径");

background-repeat

repeat 重复
repeat-x 横向重复
repeat-y 纵向重复
no-repeat 不重复

background-repeat: no-repeat;

background-size

background-size设置的是image的属性，外部的div是个容器，background包含在内。background-image撑外部的容器。

length（第一个值为宽度，第二个为高度，不设置为auto，总会填满容器）

background-size: 500px 500px;

percentage（第一个值为宽度，第二个职位高度，不设置为auto）

background-size: 100% 100%;

cover（撑满外部容器不压缩）

background-size: cover;

contain（不好用）

background-size: contain;

background-position

设置背景图像渲染起始位置

background-position: center center; 类似于中心对其

center left right

文本属性

text-align

首先是因为块元素占一整行

text-align: center;

上面是让文本在块元素中心
left 左
right 右

text-decoration

underline 下划线
overline 上划线
line-through 删除线

text-transform

控制文本大小写
capitalize 每个单词开头大写
uppercase 全大写
lowercase 全小写

text-indent

首行缩进，px，可以为负值

表格属性

表格边框

使用border属性，给边框添加样式

table, td{ border: 1px solid black; }

折叠边框

使用border-collapse，是边框折叠，一个边框无间隙

border-collapse: collapse;

宽度和高度

默认情况是字体撑边框
使用width和height可以给table或者td设置高度和宽度

表格文本对齐方式

center，right and left

td{ text-align: center; }

表格填充

对td进行设置，是文字往外扩充
padding会使文字上下左右都扩充

td{ padding: 30px; }

表格颜色

设置表格外边框内边框颜色

table, td{ border: 10px solid blue; }

设置td背景颜色

td{ background-color: brown; }

设置td字体颜色

td{ color: brown; }