CSS基础

CSS基础

基础语法

美化网页，布局页面，设置外观
css样式表也是一种标记语言
组成：选择器{样式} 给谁改什么样式
写在head标签内部style标签内部

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

键值对用分号结尾
属性与值之间用冒号分割

css选择器

标签选择器

标签名做选择器：某一类标签全部选出来

类选择器class

语法：.类名{属性与值} 可以多次调用

<style>
.red{color: red;}
</style>
<ul>
<li class='red'>冰雨</li>
<li>七里香</li>
</ul>

一个标签可以有多个类名 中间用空格隔开
<div class="red font35">

属性选择器id

属性名做选择器语法：#id名{样式} 只能调用一次，别的不可调用，在使用次数上

#pink{color:pink;}
<div id="pink">迈克尔</div>

通配符选择器

*所有的标签改为同一个样式
*{样式}

*{margin: 0;
padding: 0;}

字体属性

字体类型：font-family
body{font-family:‘宋体’, ‘微软雅黑’, ‘Microsoft YaHei’;}
字体大小：font-size 注意px单位
body{font-size:16px;}标题标签比较特殊，需要单独指定大小
字体粗细：font-weight
font-weight:bold,bolder,lighter
也可直接加数字
font-weight: 700; 标准为400；700为bold
font-style：normal；
字体复合属性：简写方式
font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px ‘宋体’;(不能颠倒顺序)
前两个可以省略,后两个必须有：font: 20px,“宋体”;

文本属性

文本颜色：color: 颜色名red或十六进制#ff0000或rgb(255,0,0); 十六进制用最多
文本对齐：text-align水平对齐方式 center，right，left（默认）
文本装饰：text-decoration underline，overline，line-through，none（默认）
取消链接默认下划线 设置a标签为none
文本缩进：text-indent：20px或2em；只是首行缩进 em单位，当前元素1个文字大小
行间距：line-height：26px；行间距包括文本间距、上下间距

css引入方式

按照引入方式，分为三大类：内部样式表、外部样式表、行内样式表（比较简单的样式）
内部样式表：放入style标签内 放入head标签内
行内样式表：<div style='color:red;'></div>
外部样式表：新建后缀为.css文件；里面只有样式
在html中使用link标签引入这个文件<link rel="stylesheet" href='css文件路径'> 在head标签中

Emmet语法

快速生成html标签

div*3+tab键
ul>li父子关系
div+p兄弟关系
.nav 类名 #id名默认为div生成的 有类名或id名
p.navp生成的 p#two生成
生成有序号的.demo$*5tab
div{我喜欢你} 内部写内容
div{喜欢你}*5
div{$}*样式

快速生成css

text-align：center
tac 加tab就可
输入首字母
ti2em:text-indent:2em;
w100:width:100px;
text-decoration：none； tdn

复合选择器

后代选择器

语法：父亲元素 子元素1 子元素2{样式} 中间空格隔开
标签或类任意基础选择器都行
ul li a
.nav li a

子元素选择器

只能选某元素最近一级，儿子，不能孙子
语法: 元素1>元素2{样式}

并集选择器

可以选择多组标签，定义相同样式
语法：元素1，元素2，元素3{样式}

伪类选择器

给链接添加特殊效果
前面用冒号：

链接伪类

• a: link 所有未被访问的链接
• a: visited 已被访问的链接
• a: hover 鼠标指针位于其上的链接
• a: active 活动链接，鼠标按下未松开时

注意： 按这个顺序写，链接需要单独指定样式

focus伪类选择器

选取获得焦点（光标）的表单元素input类
语法：input：focus{样式}

元素显示模式

元素以什么方式进行显示 一般分为块元素和行内元素
块元素：独占一行，可设置高度和宽度，宽度默认为100%，里面可以放行内元素 文字类元素不可放块元素
行内元素：一行可设置多个，不可直接设置高度和宽度
链接里面不可放链接，a里面可以放块级元素
行内块元素：img、input、td等标签 高度宽度可以设置、一行可以多个

元素显示模式的转换

把行内元素a转换为块元素
a{display:block;width:150px;height:50px;}
把块元素转为行内元素
div{display：inline；}
行内元素转为行内块元素
span{display:inline-block;}

单行文字垂直居中

在盒子里垂直居中：使文字line-height=盒子height

CSS的背景

背景颜色：h1 {background-color:#6495ed;}
背景图片：p{background-image:url(‘paper.gif’);}
背景平铺：background-repeat:repeat-x no-repeat默认平铺
背景位置：background-position:right top; x y;(可以为方位名词顺序无影响（若一个省略，则另一个默认居中对齐），或为精确单位，前一个为x，后一个为20px 50px ) 中间空格隔开 可混合使用，前一个为x，后一个为y
简写属性：body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment fixed(固定）scoll(滚动)默认 背景图像是否固定或者随着页面的其余部分滚动。
background-position
顺序不强制 用空格隔开
背景色半透明 background: rgba(0,0,0,0.3);0完全透明，1完全不透明 alpha透明度可以写.3省略零
直接设置不透明度

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

CSS三大特性

层叠性

样式冲突，覆盖，就近原则
样式不冲突，不层叠

继承性

子标签继承父标签的某些样式
行高的继承也可继承，行高不跟单位为当前文字大小的1.5倍

优先级

标签，类选择器
选择器优先级

• 选择器相同，层叠
• 选择器不同，由权重执行：标签《类、伪类《id《行内样式《！important

继承的权重为0
权重叠加
复合选择器如：
ul li{}0,0,0,1+0,0,0,1=0,0,0,2
li{}0,0,0,1
.nav li 0,0,1,0+0,0,0,1=0,0,1,1

列表

列表项标记类型

list-style-type:none;

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

列表项标记的图像

list-style-image:url(‘url’);

ul
{
    list-style-image: url('sqpurple.gif');
}

简写属性：type image

{
    list-style: square url("sqpurple.gif");
}

移除默认标记和缩进

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

表格

表格边框

双边框

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

折叠边框——单边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

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

表格高度和宽度

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

text-align属性设置水平对齐方式，向左，右，或中心：
vertical-align垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
	text-align:right;
    height:50px;
    vertical-align:bottom;
}

需控制边框和表格内容之间的间距padding:15px;
向<th>和 <td>添加 border-bottom 属性，以实现水平分隔线：

  border-bottom: 1px solid #ddd;
}

鼠标悬停表格
tr:hover {background-color: #f5f5f5;}

盒子模型

组成：margin、border、padding、content

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

border边框

边框样式 boder-style

none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
border-width 属性指定四个边框的宽度。
border-color 边框颜色
设置四个值：分别为上右下左
三个值：上，右左，下
两个值：上下、右左
可分别设置个边：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

圆角边框：border-radius:5px; 可以设置四个值：左上顺时针，两个值时对角线为一对。
也可分开写：border-top-left-radius:20px; top left不可颠倒
也可以使用百分比形式 圆形为半径为宽度的一半，或者50%。
圆角矩形：设置为高度的一半；

边框

边框阴影语法：box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 5px #888888;
边框图像：border-image: source slice width outset repeat|initial|inherit;
border-image: url(border.png) 30 round;

border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

简写属性

宽度、风格、颜色——border:5px solid red;

表格边框

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

轮廓outline属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline-style
outline-color
outline-width
outline-offset 轮廓偏移：在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
outline
简写属性：宽度、风格、颜色

margin边距属性

可以设置为以下值
auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距
可单设各边

  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

简写同border

块级盒子水平居中

要设置width，margin-left：auto；或margin：0 auto；

行内元素和行内块元素水平居中

给其父级元素添加text-align:center;

外边距合并

嵌套快元素塌陷
嵌套块元素，父子元素同时有外边距，父元素会有较大外边距
解决方法：

1. 为父亲添加边框transparent
2. 为父亲定义内边距padding
3. 为父亲添加overflow：hidden；比较简单，不改变盒子大小

清除内外边距
*{padding=0；
margin=0；}
css第一行代码
注意行内元素一般只设置左右内外边距

padding填充属性

可以设置为length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
单设各边属性
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
简写属性：同border
注意：若不指定盒子width和height，则padding不会撑开盒子