Web前端——CSS常用样式及常用选择器

CSS常用样式

height：高度 需要加单位

 height: 800px; 高度为800px

width：宽度

 width: 800px; 宽度为800px

color：字体颜色

color: 颜色单词、十六进制#FFFFFF、Rgb、Rgba;

font-size：字体大小 默认16px最小支持8px

font-size:30px; 字体大小为30px

font-weight 字体粗细 取值范围100-900 没有单位

font-weight:600; 字体粗细为600

font-family 字体样式 根据电脑字库显示

font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

opacity: 透明度 取值范围0-1可以为小数 0为全透明

opacity:0;

rgba(red,green,blue=)：颜色取值0~255

rgba(red,green,blue,a参数)：颜色取值0~255，a参数取值0~1，0表示完全透明

color: rgb(red, green, blue);
color: rgba(red, green, blue, alpha);

opacity和 rgba（）设置透明度的区别：

（1）opacity：背景颜色和文本内容都透明

（2）rgba：只有背景颜色透明

list-style: none; 去除[[无序列表ui>li和有序列表ol>li的默认样式

list-style: none;

text-indent: 值; 首行缩进

text-indent:48px; 单位可以为px、cm

text-decoration：none（去除下划线）underline（给文本添加下划线）

                              overline（上划线） line-through（贯穿线）

text-decoration: none; 去除下划线
text-decoration: underline; 给文本添加下划线
text-decoration: overline; 给文本添加上划线
text-decoration: line-through; 给文本添加贯穿线 

background 背景;

background-color 背景颜色

background-color: 颜色单词、十六进制#FFFFFF、Rgb()、Rgba（）;

背景图片：background-image: url(url中放置图片路径（绝对、相对、网络）);

background-image:url("https://tupian");

设置背景图片是否重复：background-repeat: no-repeat; 默认重复，不重复设置no-repeat

background-repeat: no-repeat; /* 设置背景图片是否重复，默认重复，不重复设置no-repeat

调整背景图片位置：background-position: 200px 0px ;第一个值代表水平方向位置，第二个值代表垂直方向位置

background-position:center center ;/* 调整背景图片的位置，第一个值代表水平方向位置，第二个值代表竖直方向位置 center为居中  向右为正 向下为正 

调整背景图片的大小：background-size: 800px 800px;第一个值代表背景图片的宽度第二个值代表背景图片高度

*/100%和cover都是用于将图片扩大或者缩放来适应整个容器
background-size: 100%;    */按容器比例撑满，图片变形；
background-size: cover;   */把背景图片放大到适合元素容器的尺寸，图片比例不变，超出容器的部分可能会裁掉。

字体其它不常用样式

letter-spacing: 值px; /* 字体间距 */
word-spacing: 值;  /* 单词间距（英文使用） */

text-transform: 大小写转换; 

text-transform: capitalize; /* 首字母大写（英文） */
text-transform: lowercase; /* 全部小写（英文） */
text-transform: uppercase; /* 全部大写‘’ */

居中问题

块属性居中

        1、水平居中 给块元素自己设置 margin:0 auto 第一个值代表上下，第二个值代表左右         2、垂直居中 没有快捷方式（目前） 计算公式：父元素高度-子元素高度/2

非块属性居中

        1、水平居中 给父元素设置 text-align: center;
        2、单行文本垂直居中 给父元素设置line-height：父元素的高度

CSS常用选择器

常用选择器有：

1.标签选择器         2.class选择器         3.id选择器         4.后代选择器

5.子代选择器         6.组合选择器           7.通配符选择器

1.标签选择器：

        语法：标签名｛css样式｝        权重:1 

        p{
            color: red;
        }

2.class选择器（类选择器）：

        语法：.+class名｛css样式｝         权重：10

        特点：

        多个标签可以有相同的class名 一个标签可以有多个class名（多个class名用空格隔开）

注：如果class名由两个单词组成，建议用_隔开 eg：div_box

        .p1{
            color: green;
        }

        .div1{

            font-size:20px;

        }

3.id选择器：

        语法：#+id名{css样式}         权重：100

        特点：类似于身份证号：多个标签不可以有相同的id名 一个标签不可以有多个id名       

        #words{
                font-weight: 900;
        }

4.后代选择器：

        语法：父选择器 空格 子选择器｛css样式｝         权重：几个选择器权重相加

        div span{
            background-color: pink;
        }

5.子代选择器

        语法：父选择器>子选择器{css样式}         权重：几个选择器权重相加      

        div>span{
            background-color: red;
        }

6.组合选择器

        语法：选择器1,选择器2...{css样式}        权重：每个选择器单独计算

        div>p,div>h3{
                color:brown;
        }

7.通配符选择器

        语法：会选中所有标签 *{css样式}        权重：权重最小

        用途：去除一些默认样式       

        *{
            list-style: none;
            text-decoration: none;
        }