前端学习05---7.18

基本选择器

        1、通配（通用）选择器

                语法 *{ 样式声明 }

                作用：匹配任意类型的HTML元素

        2、元素名称（标签）选择器

                语法： 元素名称{ 样式声明 }

                作用：选择所有同一元素名称的所有元素

        3、类选择器

                语法：HTML中通过class属性定义

                                <div class="box"></div>

                           css中以点进行标识:.

                   .类名 {
                            样式声明;
                         }
                   .box{
                            background-color:red;
                         }

                作用:选择所有带有指定类名的元素

                多类名的使用（词列表）

                        语法：空格隔开

        4、id选择器

                语法：HTML中通过id属性定义

                                <div class="box"></div>

                           css中以点进行标识:#

                #id名称 { 
                            样式声明;
                        }
​
​
                #box{
                            background-color:red;
                     }                

                作用:选择所有带有指定类名的元素

                注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

        类与id的命名规则

                见词知义，尽量用英文；

                始终建议以字母开头，可以包含数字、字母、下划线等

                不要以数字开头

                多个单词可以以驼峰式（newsCont）、中划线连接（news-cont）、下划线连接（news_cont）等

表格CSS 属性

        表格边框

                指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性

                表格会呈现双边框，是因为表和 th / td 元素有独立的边界。

                table存在默认属性border-collapse：separate

        表格的折叠边框

                border-collapse 属性：设置表格的边框是否被合并为一个单一的边框

                取值：

                        separate：边框独立（默认值）

                        collapse：相邻边框被合并

                        border-spacing:单元格之间的间距

                        border-spacing:水平方向 垂直方向；

                        border-spacing：一个值；代表水平方向和垂直方向的间距是一样的 注意：只有在 边框独立border-collapse: separate时才能用

        单元格内容的垂直对齐

                vertical-align 作用：垂直对齐属性设置垂直对齐，比如顶部，底部或中间

                常用值

                        top顶部对齐

                        middle居中对齐

                        bottom底部对齐

CSS字体 ,文本属性

        1、font-family：

                作用：设置文本的字体系列

                语法：font-family:字体名称

                常用值：

                        一个字体名称或系列名称（介绍常用字体名称、字体系列）

                        微软雅黑 Microsoft YaHei

                        宋体 simsun

                        黑体 HeiTi

                        楷体 KaiTi

                多个字体名称

                        逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

        2、font-size

                作用：设置字体的大小

                语法：font-size:值

                常用值：

                        长度值（通常是像素px）

                        百分比（相对于父元素字号计算）

                        em

                相对单位

                        如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

                        一般浏览器默认的大小为16px,支持最小的字体为12px。

        3、font-style

                作用：设置字体的样式

                语法：font-style:值

                常用值：

                        normal默认值

                        italic斜体显示

        4、font-weight

                作用：设置字体粗细

                语法：font-weight:值

                常用值：

                        normal默认值

                        bold加粗

                        100-900九级字重， 400相当于normal,700相当于bold

        5、line-height

                作用：设置行高（效果是产生文本行间距）

                语法：line-height:值

                特性:实现单行文本的垂直居中

                测量：文字高+行间距

                        打开px软件--在视图菜单---标尺（Ctrl+r）

                        参考线：在标尺上按住鼠标左键不松手，拖拽鼠标

                        按住alt键，放大图纸，为了测量更加准确，滚动滚轮，向外滚表示放大，向内滚表示缩小

                方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量

                常用值

                        normal默认。设置合理的行间距。

                        px 设置固定的行间距。

                 百分比:相对于font-size计算

        6、font简写

                作用：设置所有字体属性

                语法：font: 字体风格 字体加粗 字号/行高 字体;

                           依次【空格】隔开

                总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简简代码

        7、text-align：

                作用：设置文本的水平对齐方式

                语法：text-align:值

                常用值

                        left居左对齐 [默认值]

                        right居右对齐

                        center居中对齐

                        text-align: justify文本两端对齐方式

                注：适用于块状元素

        8、text-decoration

                作用：设置文本装饰

                语法：text-decoration:值

                常用值

                        none 默认。定义标准的文本。 【常用】

                        underline 定义文本下的一条线 【常用】

                        line-through 定义穿过文本的一条线。【比较常用】

                        overline 定义文本上的一条线。 【不常用】

        9、text-indent

                作用：设置文本块首行的缩进

                语法：text-indent:值

                常用值

                        默认值：0

                        长度值，px,em

                        百分比: 相对于元素内容宽进行计算

                        允许负值

        10、color

                作用：设置文字的颜色

                语法：color:颜色值