CSS基础讲解、属性、选择器、模型

CSS也叫做层叠样式表

CSS选择器

id选择器：id表示省份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素

标签选择器：根据标签名称 选择对应的所有标签

类（别）选择器：选择器拥有该类别的多个元素

（*号） 通用选择器：针对页面上所有的标签都生效

选择器 权重问题

行内样式 《style=“… ”》大于
id选择器 《#box{…}》 大于
类选择器 《.con{…}》大于
标签选择器 《div{…}》大于
通用选择器 《*{…}》

选择器选择的范围越小越精确
优先级就越高

css一些文本属性：

{color：red} 文字颜色
{font-family：“…”} 字体类型
{font-seiz：…px} 文字大小
{font-weight：bold} 文字加粗
{font-style：italic} 文字倾斜 italic（倾斜）
{text-indent：…px} 首行缩进
{text-align：center} 水平对齐方式
{line-height：…px} 行高
{height：…px（行高） background-color：gray|（背景颜色） line-height：…px（可以让字体在中间显示）}
{text-decoration：underline} 文本修饰 加下划线

css中的 图片介绍：

gif
支持动画
只有全透明和不透明两种模式
只有256种颜色----图形 图标类

jpg
采用有损压缩算法
体积较小
不支持透明
不支持动画

png
采用无损压缩算法
体积也相对较小
支持背景透明
不支持动画

元素的浮动布局

浮动元素会脱离网页文档，与其他元素发生重叠
但是，不会与文字内容发生重叠

overflow：auto 表示溢出的意思，对于超出的元素 可以自动调整
clear：left、right、both ：清除浮动的意思 左 右 和左右都不受浮动的影响

浮动元素在排列时，只参考前一个元素位置即可

1.浮动元素不会覆盖文字内动
2.浮动元素不会覆盖图片内容
（因为图片本身也属于文本，可以图片看做是一个特殊的文字）
3.浮动元素不会覆盖表单元素
（输入框、单选按钮、复选框、按钮、下拉选项等）

css盒子模型基础：

margin：0 将所有的元素编剧都设置为0

overflow：auto 让父元素的高度包裹内存一样

margin： auto（让父元素自动设置边距，左右边距相等，即可达到居中效果，
只有水平方向有效，垂直方向无效）

margin -top 顶部边距
margin -right 右边边距
margin -bottom 底部边距
margin -left 左边边距

填充，就是指向一个元素的内部，增加空间，也可以称为“内边距”
和外边距不同的是，填充会改变元素大小。随着填充的增加，元素会被撑大

padding 内边距 也分为上右下左

盒子模型分为
内容–填充–边框–边距
填充会吧元素撑大 无论边框还是边距 都是分为 上右下左

补充

background 背景属性

background-color 背景颜色
background-image 背景图片
background-repeat 背景图平铺方式

可以连着一起写，按这个顺序写

background 背景颜色-背景图片-平铺方式

省略其中一个也是可以的

border 边框属性

border-width 边框宽度
border-style 边框样式
border-color 边框颜色

border 1px solid #000000
边框宽度 边框样式 颜色

border： 3px dashed
只有颜色可以省略 默认黑色 其他两个不能省略 要注意顺序

font 字体属性

font-style：italic 斜体
font-weight:bold 加粗
font-family：arial，sans-serif 字体种类
font-size 20px 字体大小
line-height：35px 行高

顺序
font：斜体字 -加粗-字号大小-行高-默认字体-备用字体
可以加备用字体，在找不到默认的情况下 用备用字体

也是可以省略其中的 但是要注意顺序