day05-css属性

<!--

    边框属性的使用

    1.边框属性的组成

        - border-width 边框的宽度

        - border-style 边框的样式

        - border-color 边框的颜色

    2.属性值

        - 边框的宽度:px为单位

        - 边框的样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)

        - 边框的颜色:英文单词

    3.边框的简写/复合写法

        - 属性:border

        - 属性值:border-width border-style border-color

        - 当一个属性有多个属性值的时候是可以不区分先后顺序的

        - 每个属性值之间使用空格隔开即可

    4.常见需求引出边框的其他用法

        - 改变某个方向上边框颜色:border-top-color

        - 改变某个方向上所有样式:border-方向

        - 清除某个标签的默认边框样式:border:none/0

    5.哪些标签自带边框

        - 学习过的:input

        - 没有学习:textarea(多行文本域)、select(下拉菜单)

    6.三角形的绘制

 -->

<!--

    盒模型使用的总结

    一.作用:设置元素与元素之间的间距

    二.组成:content+padding+margin+border

    三.计算方式

    1.盒子的自身大小:content+padding+border

    2.盒子的真实大小:content+padding+border+margin

    四:盒模型的分类:box-sizing

    1.标准盒模型:content-box(默认值)

    2.怪异盒模型(IE盒模型 border-box)

        - 特点:padding和border不会撑大盒子的大小

        - 计算

            - 自身大小:content(包含padding和border)

            - 真实大小:content(包含padding和border) + margin

 -->

<!--

    文本大小的使用

    1.属性:font-size

    2.属性值:常规的属性值/法定的属性值

        - 可以使用数值和单位表示文本的大小

        - 在浏览器中默认的字体大小是16px,设置字体的时候建议设置为偶数

        - 由于浏览器之间存在差异,规定浏览器最小字体是12px(设计图字体大小12px)

        - web中px单位是最常用的,pt、em

            - pt 磅,常用于一些硬件设备(打印机)

            - em 相对单位,相对于父级元素计算(首行缩进)

 -->

<!--

    文本类型的使用(word、ppt文件字体)

    1.属性:font-family

    2.属性值

        - 中文:当属性值是中文的时候建议加引号

        - 英文:当属性值有多个英文单词的时候需要加引号,只有一个不需要加引号

        - 在浏览器中默认的字体类型是微软雅黑,字体需要在本地有字体包(网路下载存在本地)

        - 在windows系统下中文汉字是宋体/新宋体,英文arial字体

 -->

<!--

    加粗属性:font-weight

    1.100~900 整百数 表示加粗程度,没有px单位 100~500(表示正常字体) 600~900(表示加粗)

    2.bold      加粗的

    3.bolder    更粗的

    4.normal    正常的/清除加粗标签的默认样式

    倾斜属性:font-style

    1.italic 倾斜的

    2.obliuqe 更倾斜的

    3.normal  正常的/清除倾斜标签的默认样式

 -->

<!--

    水平方向对齐

    1.属性:text-align

    2.属性值

        - left/right/center

        - justify 两端对齐

    垂直方向对齐

    1.属性:line-height

    2.特点:当行高和容器高度相等的时候就会垂直方向居中显示

 -->

<!--

    文本属性总结

    1.font-size 文本大小

    2.font-family 文本类型

    3.font-weight 文本加粗

    4.font-style 文本倾斜

    5.text-align 水平对齐

    6.line-height 垂直对齐

    简写方式

    1.属性:font

    2.属性值:font-weight font-style font-size/line-height font-family

    3.说明

        - font-weight font-style没有需求可以不写并且可以互换位置

        - font-size/line-height 固定的不可以互换位置

        - font-family无论有没有需求都要写

 -->

<!--

    文本颜色的使用

    1.属性:color(切记不可以写成font-color!)

    2.属性值

        - 英文单词:green、pink、red

        - 十六进制:

            - 用法:以#开头,后面有六位字符任意组成(abcdef0123456789)

            - 常见的颜色:#ffffff,#000000,#cccccc(当后面的六位字符是相同的时候可以简写为3位)

            - 获取设计图的颜色:ps的吸管工具/getColor软件(在01资料里面)

        - rgb()/rgba(red, green, blue,alpha) 透明度 0~1

        - 拓展:透明度的写法 opacity:0~1

 -->

<!--

    一:文本修饰属性

    1.属性:text-decoration(修饰/描述)

    2.属性值

        - underline 下划线

        - overline 上划线

        - line-through 删除线

        - none 没有/清除下划线

    二:首行缩进

    1.属性:text-indent

    2.属性值:数值加单位(px、em)

    三:文字间距 letter-spacing

 -->

<!--

    列表属性的使用只针对于有序和无序列表

    1.属性:list-style-type

    2.简写:list-style

    3.属性值:none 表示将列表的默认符号清除掉(兼容)

 -->

<!--

    一:背景颜色的使用

    1.属性:background-color/简写background

    2.属性值:css中颜色用法是一样的(边框颜色、背景颜色、文字颜色) 英文单词/十六进制/rgba

    二:背景图片的使用

    1.属性:background-image

    2.属性值:url(图片的路径地址)

    3.注意点关于img和背景图片的区别

        - img是结构默认只会显示一张并且是占位置的

        - 背景图片是不占位置并且默认是会铺满整个容器

    三:背景平铺属性

    1.属性:background-repeat

    2.属性值

        - no-repaet 不平铺,只会显示一张图

        - repeat 平铺,默认值

        - repeat-x

        - repeat-y

    四:背景定位属性

    1.属性:background-position(位置/定位)

    2.属性值

        - 坐标值 100px 100px

        - 方向值:top、right、bottom、left、center

        - 当水平方向和垂直方向相等的时候可以简写成一个

    五:背景固定属性

    1.属性:background-attachment

    2.属性值

        - scroll 默认值

        - fixed 固定

    六:背景属性的简写方式

    1.属性:background

    2.属性值:颜色 图片 平铺 定位 固定

 -->