css基础

什么是CSS？
层叠样式表，专门是用来修饰HTML的元素的
CSS的组成主要是两部分：
选择器：就是主要用来查找要修饰的元素
声明:包含两部分：属性和属性值
选择器{
属性：属性值;
}
基本的选择器分为三种：
标签选择器
类选择器
ID选择器
正常来说，三种选择器的优先级是:
ID选择器>类选择器>标签选择器


css样式共有三种用法：
行内样式：直接在标签里加一个style属性，只能用来修饰这个标签
内部样式表:是在页面的head标签里加一个style标签，可以用来修饰整个页面
外部样式表：把CSS样式写在一个外部的扩展名为.css的文件里
在页面中通过两种方式可以引入外部的样式表：
1.链接式
<link href="css/css.css" rel="stylesheet" type="text/css" />
2.导入式
<style type="text/css">
@import url("css/css.css")
</style>
正常情况下：三种样式表的优先级
行内样式表>内部样式表>外部样式表
注意：内部样式表和外部样式表的优先级和引入顺序和选择器有关


选择器又包含一些复合选择器
后代选择器：以空格的方式隔开，修饰儿子，孙子。。
并集选择器：多种选择器之间用逗号隔开
子代选择器：以>隔开，只修饰儿子
相邻兄弟选择器：以加号隔开

属性选择器：把属性写在[]里，在指定元素中找指定属性的

css的常用样式：
1.字体样式：以font开头的属性都是用来修饰字体的
2.文本样式：
3.背景样式：以background开头的属性都是用来修饰背景的
背景色
背景图
背景的重复
背景的偏移
4.列表样式:list-style
5.盒子模型：边框，外边距，内边距
外边距指盒子与盒子之间的距离
内边距：指盒子与内容之间的距离
这三个属性分别都有四个方向，top,right,bottom,left
6：浮动属性，float,就是可以把块级元素变成行级元素的的属性
7:清除浮动，clear,就是可以让新的块级元素重新按正常文档流走
8：定位：position,常用的有相对定位和绝对定位
相对定位relative:就是相对元素自己原来的位置来移动（占着茅坑不拉屎）
绝对定位absolute:就是相对于元素的有定位的父元素来移动，如果（不占坑，脱离正常文本流）
它所有的直接或者间接的父元素都没有定位，就会以浏览器为基准
一但有了定位，就可以设置上，下，左，右移动的方向
9：盒子的叠放层次
一但有了定位，可以用z-index属性来设置让哪个元素在上面
该属性值越大，那就越是处于最上方

1.CSS列表： CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

list-style           简写列表项

list-style-image     列表项图像

list-style-position  列表标志位置

list-style-type      列表类型

list-style-type: decimal;

list-style-image: url("icon.png”);

class 可以重复  先加载样式再找结构内容

而id是唯一的 先加载结构内容在找样式

CSS表格：CSS表格属性可以帮助我能极大的改善表格的外观

表格边框 border: 1px solid blue;

折叠边框 border-collapse: collapse;

表格宽高width: 400px;

height: 400px;

表格文本对齐 text-align: right;

表格内边距 padding: 5px;

表格颜色background-color: aqua;

1.轮廓主要用来突出元素的作用

outline 设置轮廓属性

outline-color 设置轮廓的颜色

outline-style 设置轮廓的样式outline-style: groove;   

 double;

dotted;

outline-width 设置轮廓的宽度 outline-width:20px;