第五天之初学css样式

一、样式引入的方式

内部样式表 优先级低于行内样式 只能对当前页面元素生效
1.在head标签中使用 style标签
2.选择器用于标签选择
3.在{}中编写样式语句
选择器{
属性名：属性值；
属性名：属性值；

举例：
<style>      
	span{
        color: green;
        }
 </style>

二、最常用的样式

color : 前景色
background-color: 背景色
font-size: 字体大小
font-weight: 字体粗细
border: 1px solid red
border-radius: 圆角
margin 外边距
padding 内补
width height 宽高
text-align 文本对齐方式
height=lineheight 垂直居中
text-decoration none 去除下划线
display :inline不换行 block块元素 inline-block行内块
list-style none 去除列表样式

三、最常用的选择器

内联属性、行内样式、属性样式

写在开始标签内部 只针对当前标签有效
style=“属性名:属性值;属性名:属性值;”

内部样式表

只针对当前html有效
把style标签写在head中
在style标签中写入选择器{}
在{}中写入选择器{属性名:属性值;属性名:属性值;}

外部样式表

在css文件中编写
在css文件中写入选择器{}
在{}中写入选择器{属性名:属性值;属性名:属性值;}
在需要使用的页面内 使用link标签引入 在style标签上面

**优先级：内联>内部>外部**

案例

 <style>
 /*   通配符 能够匹配所有元素  */
    *{
        color: blueviolet;
        font-size: 15px;
        margin: 0px;
        font-weight: 900;
    }
    
    /* 标签选择器 */
    h1{
        color: yellow;
    }
    
    /* class类名选择器 */
    .item{
        background-color:green;
        margin: 10px;
    }
    
    /* id选择器 优先级最高 */
    #p{
        background-color: chocolate;
    }
 </style>

四、边框边距内补写法

border

 border-top:30px solid red;
 border-bottom :10px solid peru ;
 /* border:10px solid lightcoral ; */

margin

 /* margin 支持4种写法 使用的是父元素的背景色
        只有一个数 代表上下左右
        只有两个数 第一个代表上下 第二个代表左右
        只有三个数 第一个代表上  第二个代表左右 第三个代表下
        如果有四个数 代表顺时针 上右下左 */

        margin:10px;
        margin:10px 20px;
        margin:10px 20px 30px;
        margin:10px 20px 30px 40px;

padding

/* padding 支持四种写法 使用的是自己的背景色
         只有一个数 代表上下左右
        只有两个数 第一个代表上下 第二个代表左右
        只有三个数 第一个代表上  第二个代表左右 第三个代表下
        如果有四个数 代表顺时针 上右下左 */

        padding:10px;
        padding:10px 20px;
        padding:10px 20px 30px;
        padding:10px 20px 30px 40px;