CSS样式大全 以及各样式的重点部分

CSS样式的三种书写样式方式：行内式、内部样式表、外部样式表。

• 行内式         写在标签里面的如：img style="width: 600px; " src="" alt="">
• 内部样式表   写在<style></style>里面
• 外部样式表    在目录下创建css文件，把样式写入css文件里面，然后导入css样式文件即可
• <link rel="stylesheet" href="style.css">

CSS样式知识大全

h2 {    /* 让<h2>标题标签不加粗 */ 

            font-weight: 400;

        }

        a {     /* 使超链接<a>标签没有装饰线（下划线） */

            text-decoration: none;

        }

        p {     /* 文本第一行首行缩进多少距离 em为相对单位 缩短几个文字大小 */

            text-indent: 2em;

                /* 行间距=上间距+文本高度+下间距 */

            line-height: 25px;

        }

        /* <a>链接由行内元素转为块级元素 改宽高 */

（补充：元素模式转换 一个模式的元素需要另外一种模式的特性

        转换为块级元素：display:block

    转换为行内元素：display:inline

      转换为行内块元素：display:inline-block）

        .star {

            width: 150px;

            height: 50px;

            background-color: pink;

            display: block;

        }

        /* CSS继承性 行距为字体大小×1.5 好处子元素可以根据自己文字大小自动调整行高*/

        body {

            font: 16px/1.5 microsoft yahei ;

        }

font属性

 font复合写法(顺序不能改变,省略(取默认值)，但是必须保留font-size和font-family属性)

// font: font-style font-weight font-size line-height font-family;

CSS背景属性 （建议：想不起来去查手册 “需要css中文手册的在评论区留言，我会私信给你”）

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺

background-position 背景位置

background-attachment : scroll | fixed 背景固定

// 背景复合写法 推荐使用方便快捷 属性值之间空格隔开

background: red url(image.jpg) repeat-y fixed top;

// 背景颜色半透明写法

      <!-- 最后一个参数是alpha透明度，取值范围在0~1之间 -->

background: rgba(0,0,0,0.3)

opacity: .5 也是透明度属性

CSS的特性 层叠性 继承性 优先级

• 层叠性 样式冲突之时 后面的样式覆盖前面的样式 （巧妙记忆：长江后浪推前浪，前浪死在沙滩上）

• 继承性 继承父元素的样式，权重为0（重点）

• 优先级 权重叠加：如果是复合选择器，则有权重叠加，需要计算权重

注意：权重问题很重要

由于内容比较多且详细，有很大篇幅，下面的内容请点击我的博客首页继续浏览