CSS的各种属性样式和重点——之转生在异世界学前端-CSDN博客

本文链接：https://blog.csdn.net/duyan0828/article/details/137284115

引入css样式表方式

1.行内

2.内部样式

在head标签里面加style双标签将代码写在style里面

3.外部样式

将css样式写在一个css文件然后用link标签引入css样式表

快速生产标签

css快速生成

1.字体样式

font-size字体大小默认大小为16px，页面最小为12px 1em=16px

font-family字体样式

font-weight字体粗细 bold或者700加粗细体lighter 正常normal后者400

font-style字体倾斜 normal默认正常，italic斜体倾斜

综合写法顺序：斜体，粗细，大小，样式

font：italic 500 20px "宋体";（可以不写宽度和斜体但是必须有大小和样式）；

如font：16px "宋体"

2.css外观属性

width宽 height高 border:1px solid #ccc(边框)

文本颜色 color：red（单词表示法）

color：#777（十六进制表示法）

color：rgb(255,234,12) (rgb表示法)0-255之间的数

color：rgba（255，12，1，1）颜色半透明值为0—1

line-height行高文本垂直居中行高=盒子高

text-align：center（水平对齐方式）：center居中 right右对齐 lft左对齐 justify两端对齐

text-indent首行缩进单位em

text-decoration：none清除下划线 underline下划线 overline上划线 line-through删除线

letter-spacing 字符间距

word-spacing单词间距

文字阴影 text-shadow：水平位置垂直位置模糊距离阴影颜色

3.复合选择器

交集选择器既符合是个div标签又符合class类名的选择器

        /* 1.交集选择器 */
        div.box {
            color: #f00;
        }

并集选择器

同级的多个选择器同时添加样式

        p,
        span,
        b {
            color: pink;
        }

后代选择器父级选择器下的某一个选择器

        .father .son {
            color: purple;
        }

直系后代选择器

父子级关系的选择器

        .father1>.son1 {
            color: red;
        }

标签显示模式的转换

display:block块级元素

display:inline行内元素

display:inline-block行内块元素

4背景属性

background-color:red (背景颜色) transparent透明色

background-image 背景图

background-repeat背景平铺方式 no-repeat不平铺

background-position背景定位

background-attachment背景附着

background-size: cover;背景缩放

cover必须保证背景将容器撑满 contain 必须保证自身图片完整

精灵图的三个属性

background-image

background-repeat

background-position

5.

盒子属性

border边框

            /* 边框 */
            /* border: 边框厚度 边框样式 边框颜色; */
            border: 10px solid #0f0;
            /* 单独控制某一个方向的边框 */
            border-top: 10px solid pink;
            border-right: 10px solid #00f;
            border-left: 10px solid #0ff;
            border-bottom: 10px solid #f0f;
            /* 单独控制边框的某一个属性 */
            border-width: 2px;
            /* 单实线 solid  虚线dashed 点线dotted 双实线double 山脊线groove  */
            border-style: solid;
            border-color: pink;

border-radius边框圆角设置50%是圆

padding内边距

margin外边距

float浮动

position定位相对定位relative 绝对定位absolute 固定定位fixed

盒子消失 display:none消失 display:block显示

盒子隐身 visibility：hidden隐身 visibility：visible显示

溢出隐藏

overflow:hidden超出隐藏

overflow:auto超出自动显示滚动条

overflow:scroll不管超出与否，总是显示滚动条

超出文本变为省略号

            /* 1.让文本在一行展示 */
            white-space: nowrap;
            /* 2.设置溢出隐藏 */
            overflow: hidden;
            /* 3.超出文字变为省略号 */
            text-overflow: ellipsis;

鼠标样式 pointer小手 text文本 move十字架 not-allowed禁用