第三天学习（css基础）

一.css基本语法（style）

1. 格式

        选择器{属性1：值1；属性2：值2}

        单位：px—>像素 %—>百分比

        基本样式：width（宽）、height（高） background-color（背景颜色）

        注释：/* */

2. 内联样式与内部样式

        内联样式：在html中标签上添加style属性实现

        内部样式：在style标签内添加样式（可复用）

        外部样式：创建css文本，文本写法：选择器{属性：值；}

                          a. <link>标签：页面于外部文件引入关系

                              通过link标签引入外部资源，rel属性指定资源跟页面关系，href属性资源地址

                              rel属性值查看网上：https://www.w3school.com.cn/tags/att_link_rel.asp

                              值为：stylesheet    外部样式表

                         b.   <style> @import  url('文件路径')；</style>

3. css颜色表示法

        1.单词表示法：red、blue、green等

        2.十六进制表示法：#000000 等

        3.rgb三原色表示法：rgb（255，255，255）取值范围0~255

4. css背景样式

        backgound-color:背景颜色

        backgound-image:背景图片  url（地址）     默认水平垂直铺满

        backgound-repeat:背景图片平铺方式    repeat-x    repeat-y      repeat（x,y）

        backgound-postion:背景图片位置   x   y      （center、left、right、top、bottom）

        backgound-attachmennt:背景图滚动条移动方式    srocll（跟着滚，默认）   fixed（不滚动）

5. css边框样式

       border-style：边框样式       solid（实线）   dashed（虚线）  dotted（点线）

        border-width：边框大小（px）

        border-color:边框颜色（可指定位置边框进行设置）

        ex：边框三角形

<style>
    div{width:0px;heigth:0px;border-style:solid;border-right-width:30px;}
</style>


<div></div>

6. css文字样式

        font-family:字体类型（可设置多个备用）

        font-size：字体大小           默认16px     注：一般字体大小为偶数

        font-weight：字体粗细      模式：正常（normal） 加粗（bold）    number（100~900）

        font-style：字体样式         默认：正常（normal） 斜体（italic、oblique）

                                                区别：（1）italic：所有带有倾斜属性字体可以设置

                                                           （2）oblique：没有倾斜属性字体也可以设置

        color：字体颜色

7.css段落样式

        text-decoration：文本修饰（可多个，空格隔开）

                               underline：下划线      line-through：删除线        overline：上划线     none：无

        text-transform：文本大小写（针对英文段落）

                                lowercase：全小写   uppercase：全大写      capitalize：首字母大写

        text-indent：文本缩进   （默认一个字16px）

                                em单位：相对单位，1em永远跟字体大小相同

        text-align：文本对齐方式

                              left、right、center、justify（两端对齐）

        line-height：行高   （由上边距、字体、下边距构成）

                              取值：（1）number（px）   （2）scale（比例值，跟文字大小成比例）

        letter-spacing：定义字间距（px）

        word-spacing：词之间间距（每个单词）

        英文和数字不自动折行问题：

                1.word-break：break-all；非常强烈的折行

                2.work-wrap：break-word；不是那么强烈折行，会产生一些空白区域

8.css复合样式

        （1）background：red    url()    repeat     x    y        (无顺序)

        （2）border：1px  red   solid         （无顺序）

        （3）font：weight    style   size/line-height    family    （顺序写，最少有size   family）

        注：尽量不要混写，非要混写，那么一定先写符合再写单一样式