2019-04-17 css样式

2019-04-19 本文已影响0人果冻_4c9b

css样式导入

<head>
<meta charset="utf-8">
<title></title>
<!-- 链接式 先找css文件，在渲染html-->
<head>....link导入css样式</head>
<!-- <link rel="stylesheet" href="css/test.css"> -->
<!-- 导入式 先渲染html在找css-->
<style >
@import url("css/test.css");
</style>

文字样式

字体大小最小不可以小于十二像素

 font-size:26px;

字体类型

      font-family: arial;

字体加粗 bold=700

       font-weight: bold;

字体风格 italic斜体

   font-style: italic;

文本样式

标签宽度

   width: 300px;

文本颜色

    color: #0000FF;

文本对其方式 left right center

   text-align: right;

首行缩进 1em=1个字符大小

    text-indent: 2em;

文本修饰 underline下划线 none没有任何文本修饰

       text—decoration:none ;

行高

     line-height:30px ;

垂直居中涉及的不是内容，是当前元素
默认向下对齐
垂直居中middle上对齐top

       vertical-align:middle;

伪类

伪类----一些英文单词，代表种状态
元素伪类{ }
没有下划线

 a{
  text-decoration:none;
  }

hover 鼠标悬停

a:hover{
color: red;
text-decoration: none;
  }

边框

边框的：颜色 粗细 样式solid实线 dashed虚线 
border:red 1px dashed;

圆角半径

   border-radius: 10px;

阴影 x,y,z 发光度color

 box-shadow: 5px 7px 8px red;

重置列表样式

  ul，ol
  list-style：none；去掉列表样式

去掉下滑线

      a{
text-decoration: none;
  }

边距

内边距

    padding: 10px;
    padding 10px四周编剧
    padding: 5px 20px; 第一参数上下 ，第二参数左右
    padding: 5px 20px 30px 40px;上右下左
    padding-bottom: 20px; 下

外边距

   margin:10px;
   margin-bottom:10px ;

margin的x轴方向不存在叠加问题
margin的Y轴方向存在叠加问题取最大值

样式重置

div{
 padding: 0;
 margin: 0;
 }

使用外边距居中问题

 text-align: center;
  margin: 50px auto;

backgroud使用

 background - color
 background-imge

背景图片默认重复平铺
位置可以写像素，也可以写固定的英文表示确切的位置

 left right center 
 top bottom center 
 background: url(img/a1.jpg) no-repeat 10px 50px red;

是否重复平铺

   no-repeat不重复
   repeat-x x轴平铺
   repeat-y y轴平铺
   background: url(img/a1.jpg) repeat-x center center red;

display

    display ：none ：从文档流中消失
     块元素block
     内联元素 inline
     内联块元素inline-block
     文件流