前端学习DAY3

1.字体属性

字体属性定义字体的颜色（color），大小（font-size），加粗，样式

1.1color可以用名字，十六进制（用#开头，后接六位），RGB（rgb（255,0,0））rgba多了一个参数——透明度，1是完全不透明，0是完全透明

1.2font-size设置文本大小

1.3font-weight设置文本粗细。用数字表示粗细100-900，<400表示细，>400表示粗

1.4font-style设置文本风格，italic表示斜体，normal表示默认

1.5font-family设置元素的字体。每个值用都好分开，如果包含空格必须加上引号，例如微软雅黑

2.背景属性

2.1background-color设置背景颜色

head中：
.container{
            width: 400px;
            height: 400px;
            background-color: red;
            
        }
body中：
<div class="container">
        <h1>hello</h1>
</div>

2.2background-image设置背景图像

默认放置在左上角

background-image: url("壁纸2.png")

2.3background-repeat设置平铺背景图像

repeat：默认平铺 repeat-x：水平方向重复repeat-y垂直方向重复no-repeat不重复

background-repeat: repeat;

2.4background-size设置背景图像大小

length宽度和高度 percentage百分比 

cover保持横纵比，将图片缩放成最小大小，相当于让图片充满整个容器

contain缩放成最大大小，让照片在容器中全部展示

background-size: contain;

2.5background-position设置图像起始位置

left左 right右 center中 top上 bottom下 x%y%（第一个值是水平位置，第二个值是垂直位置）

background-position: 100% 0%;

3.文本属性

3.1text-align水平对齐方式

left左 right右 center中间

text-align: center;

3.2text-decoration规定了添加到文本的修饰，包括underline（下划线）overline（上划线）lin-through（删除线）

text-decoration: underline;

3.3text-transform定义文本大小写captialize（每个单词开头大写）uppercase（全部大写）lowercase（全部小写）

text-transform: capitalize;

3.4text-indent定义文本的缩进

4.表格属性

4.1边框border

table,tr,td{
            border:2px solid black;
        }

4.2折叠边框border-collapse

 table{
            border-collapse:collapse;
        }

4.3宽度高度width height

table{
            border-collapse:collapse;
            width: 500px;
            height: 500px;
        }

4.4文字对齐text-align（水平对齐）vertical-align（垂直对齐）

text-align: center;

td{
            vertical-align: bottom;
        }

4.5表格填充padding，这个是对td进行定义

td{
            vertical-align: bottom;
            padding: 20px;
        }

4.6表格背景颜色background-color，color字体颜色

td{
            vertical-align: bottom;
            padding: 20px;
            background-color: lightblue;
            color: white;//字体颜色
        }

5.关系选择器

5.1后代选择器

选择所有被E元素包含的F元素，中间用空格隔开

E   F{}

<style>
        ul div{
            list-style: none;
            color:blue;
        }
    </style>

5.2子代选择器

E>F{}

<style>
        ul>div{
            list-style: none;
            color:blue;
        }
    </style>

5.3相邻兄弟选择器

紧跟E元素后面的F元素

E+F{}

<style>
        p+ h2 {
            color: red;
        }
    </style>

5.4通用兄弟选择器

选择E元素以后所有的兄弟元素F

E~F{}

<style>
        p~ h2 {
            color: red;
        }
    </style>