CSS基本样式

CSS基本样式

引入方式：

1. 行内引用

<p style="background-color: blue;color: red;font-size: 120px">这是另一个段落</p>

2. 内联式

<style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>

3. 外联式

<link rel="stylesheet" href="../css/style.css">

优先级：

从上而下 谁在后用谁
上面我们介绍到三种引入样式的方式，这三种样式可重叠使用，即可以在使用外联样式的同时使用内页样式，同时可在行内标注。

CSS基本语法：

p{background-color: rgb(red,green,blue);color:#6a2121;}

选择器{属性:值;属性:值;} （属性:值)声明样式

基本样式：

宽：width:100px;
高：height:100px;
背景颜色：background-color: aqua;
注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应。

h1{
            color: #000;
            width: 200px;
            height: 100px;
            background-color: #fff;
        }

选择器：

• 通配符选择器 *

*{
            margin: 0;
            padding: 0;
        }

• 标签选择器 HTML中定义的标签可以作为选择器

p{
            background-color: rgb(red,green,blue);
            color: #6a2121;
        }

• 类选择器 class

.classname{
            height: 300px;
            background-color: #6a2121;
        }

• id选择器 id

#idname{
            width: 400px;
            background-color: white;
        }

• 群组选择器 选择器之间用 , 隔开

.div1,.div2,.div3,p{
            width: 400px;
        }

• 层级选择器

1. 后代选择器 空格

ul li{
            list-style: none;
        }

2. 子代选择器 > (父子关系必须是上下级关系紧挨在一起)

ul > li{
            list-style: none;
            font-size: 28px;
        }

3. 相邻兄弟 + 只修改他下面的相邻的选择器

.li4+li{
            color: red;
        }

4. 通用兄弟 ~ 修改他后面的所有选择器

.li4~li{
            color: red;
        }

5. 伪类选择器

li:hover{
            color: blue;
            /* 鼠标变小手 */
            cursor: pointer;
        }

选择优先级：

全局选择器（*） < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 < !important

字体样式：

• font-size 改变字体大小
• color 改变字体颜色
• text-align 对齐方式 用于水平对齐
  center 居中
  right 右对齐
  justify 两端对齐 如果让最后一行也实现两端对齐需要加一行代码 text-align-last: justify
• line-height 行高 用于：实现垂直居中 （行高 = 盒子高）
• text-indent 首行缩进 缩进2个字符时，值等于字体大小*2
• list-style li默认样式 none 去除li的默认样式
• text-decoration 定义文本 underline下划线 overline上划线 line-through删除线
• text-transform 定义单词大小写 capitalize 定义每个单词以大写字母开头 uppercase 全部字母都大写 lowercase 全部字母都小写

背景样式：

• background-color 定义背景颜色
• background-image 定义背景图片
• background-repeat定义背景图片平铺方式
• background-size 定义背景图片大小

元素转换：

行内元素 span a
行内块元素 img 表单元素（input、select、textarea）
块级元素 div p h1-h6 ul li hr br

display:

• lnline-block: 设置为行内 块元素，宽高生效，不独占一行
• block：设置为块级元素，宽高生效，独占一行
• lnline： 设置为行内元素，宽高不生效
• none：隐藏