CSS

94 阅读2分钟

1.CSS

CSS是层叠样式表单,是用于增强控制网页样式并允许将样式信息与网页内容和分离的一种标记性语言。

2.html和css结合复用

(1)、

(2)、在head标签中,使用style标签来定义各种自己所需要的各种css样式

格式:     
      xxx{
        key:value value;
      }

(3)、把css样式写成一个单独的css文件。再通过link标签引入即可复用。

使用html的<link rel="stylesheet" type="text/css"herf="./style.css/"/>标签导入css样式

2.CSS选择器

(1).标签名选择器

 格式: 标签名{
         属性:值;
         }
 可以决定哪些标签被动的使用这个样式
 

(2).id选择器

 格式:  #属性值{
             属性:值;
         }
 id选择器可以让我们通过id属性选择性的去使用这个样式
         #id001{
             color:red;
             font-size:30px;
             border:1px yellow solid;
         }
         
         <div id="id001"> 标签1</div>

(3).class选择器(类选择器)

格式:   .class属性值{
            属性:值;
            }
可以通过class属性有效的选择性的去使用这个样式
.class01{
    color:blue;
    font-size:30px;
    border:1px yellow soid;
}

<div class="class01">标签1</div>

(4) .组合选择器

格式: 选择器1,选择器2,选择器n{
    属性:值;
}
    .class01,#id001{
         color:blue;
     font-size:30px;
     border:1px yellow soid;
    }
    <div class="class01">标签1</div>
    <div id="id001"> 标签</div>

3.CSS常用样式

(1)、字体颜色 color:red

(2)、宽度 width:19px;

 宽度值可以写像素值:19px
 也可以写百分比值:20%
 

(3)、高度 height:20px;

 高度值可以写像素值:19px
 也可以写百分比值:20%

(4)、背景颜色 background-color:#F2D4C

(5)、字体样式 color:#F00000字体颜色是红色

 `font-size:20px;`字体大小

(6)、红色1 像素实线边框 border:1px solid red

(7)、DIV居中(Div盒子相对于页面居中)

 `margin-left:auto;`
 `margin-right:auto;`

(8)、文本居中 text-align:center;

(9)、超链接去下划线 text-decoration:none;

(10)、表格细线

 `table{
     border:1px solid black;设置边框
     border-collapase:collapase;将边框合并
     }
     td,th{
         border:1px solid black;设置边框
     }`

(11)、列表去修饰 ul{ list-style:none; }