CSS学习

一、选择器

01. 标签选择器：

标签名{样式名1：样式值1;……}

作用：会将当前网页内的所有该标签增加相同的样式

02. id选择器:

#标签的id属性值{样式名1：样式值1;……}

作用：给某个指定的标签添加指定的样式

03. 类选择器：

类选择器名{样式名1：样式值1;……}

作用：给不同的标签添加相同的样式

04. 全部选择选择器

*{样式名1：样式值1;……}

作用：选择所有的HTML标签，并添加相同的样式

05. 组合选择器：

选择器1,选择器2,……{样式名1：样式值1;……}

作用：解决不同的选择器之间重复样式的问题

06. 子标签选择器

选择器1 子标签选择器{样式名1：样式值1;……}

07. 属性选择器：

标签名[属性名=属性值]{样式名1：样式值1;……}

作用：选择某标签指定具备某属性并且属性值为某属性值的标签

 

二、样式

01. 添加网页背景图

body{
    background-image: url(img/a1.jpg);/*添加背景图片*/
    background-repeat: no-repeat;/*设置图片不重复*/
    background-size: cover;/*设置图片平铺*/
}

02. 使用标签选择器

table{

}

03. 设置table的行高

tr{
    height: 40px;
}

04. 设置td

td{
    width: 100px;/*设置宽*/
    border: solid 1px red;/*添加边框及其颜色和大小*/
    border-radius: 10px;/*设置表框的角度*/
    background-color: orange; /*设置背景颜色*/
    text-align: center;/*设置文本位置*/
    color: blueviolet;/*设置文本颜色*/
    font-weight: bold;/*设置文本加粗*/
    letter-spacing: 10px;/*设置字体间距*/
}

ul{
    background-color: gray;
    height: 50px;
}

li{
    list-style-type:none;/*去除li的标识符*/
    /*display: inline;*/
    float: left;/*设置菜单左悬浮*/
}

li a{
    color: black;
    text-decoration: none;/*设置超链接去除下划线*/
    font-weight: bold;
    font-size: 20px;
    margin-left: 20px;
    position: relative;
    top:10px;
}

三、            css的盒子模型学习：
                div标签：
                    块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
                    特点：
                        默认宽度是页面的宽度，但是可以设置。
                        高度默认是没有的，但是可以设置。(可以顶开)
                        如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
                盒子模型：
                    外边距:margin
                        作用：用来设置元素和元素之间的间隔。
                        居中设置:margin:0px auto;上下间隔是0px,水平居中。
                        可以根据需求单独的设置上下左右的外边距。
                    边框：border
                        作用：用来设置元素的边框大小
                            可以单独设置上下左右
                    内边距：padding
                        作用：设置内容和边框之间的距离
                        注意：内边距不会改变内容区域的大小
                        可以单独的设置上下左右的内边距
                    内容区域：
                        作用：改变内容区域的大小。
                        设置宽和高即可改变内容区域的大小。