css三种引入方式 常用样式 长度 颜色 背景 基础css选择器

css的三种引入方式

一、行间式

<div style="width:200px ; height:200px; background:red;"></div>

二、内联式

<head>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>

三、外联式

file：1.css
.div{
    width:200px;
    height:200px;
    background-color:red;
}

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" herf="1.css">
    <title>外联样式</title>
</head>

样式、长度与颜色

1、基本样式

<head>
    <style>
        div{
            weight:200px;
            height:200px;
            background-color:red;
        }
    </style>
</head>

2、长度

  • px：像素，屏幕上显示的最小单位
  • mm：毫米
  • cm：厘米
  • in：英寸
  • pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用
  • em：相对长度，通常1em=16px，应用于流式布局
  • vw：相对宽度，应用于流式布局；50vw 50%浏览器的宽度
  • vh：相对高度，用法与vw相似

3、颜色

  • rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
  • rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
  • AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写abc

常用样式

1、字体样式

  • font-size：30mm; 字体大小
  • font-weight: bold, normal,lighter,100~900;字体自重
  • font-family:字体家族，多值用于备用，以，隔开
font-family:"STSong", "Arial";

  • line-height:字体的行高

  • css语法：空格隔开为多个值赋值， ，隔开为一个值多赋值

​ 有顺序 顺序为：字重 宽度/行高 字族

<style>
    div{
		font: lighter 50mm/60mm "STsong";
    }
</style>

2、文本样式

  • color：文本颜色

  • text-align:对其方式 left center right(一般用于标题居中)

  • text-decoration:字划线 underline overline line-through none(一般的用法为none,用于去除超链接的下划线)

  • vertical-align:垂直排列方式 top baseline bottom

  • letter-spacing:字间距

  • word-spacing:词间距

  • text-indent:2em;首行缩进

3、背景样式

  • background-color:red;背景颜色
  • background-image:背景图片
background-image:url(1.jpg)

  • background-repeat:平铺 no-repeat repeat-x repeat

  • background-position:定位 10px 10px;第一个控制水平位置,第二个控制垂直位置

css选择器

基础选择器

1.通配选择器

​ 匹配所有具有显示效果的标签

*{
width:100px;
height:200px;
background:red;}

2.标签选择器

​ 匹配指定标签的显示效果

div{
    width:100px;
height:200px;
background:red;
}

3.类选择器

​ 匹配指定类名的标签的显示效果

.dd{
    width:100px;
	height:200px;
	background:red;
}


<div class= "dd">
    hello!
</div>

4.id选择器

​ 匹配指定id的标签的显示效果

#id{
    width:100px;
	height:200px;
	background:red;
}

<div id= "d">
    hello!
</div>

总结:

  • 通配选择器一般用于整体的reset操作(reset操作:清除系统自定义样式)
  • 标签与id不常用
  • 类选择器为布局首选
posted @ 2018-09-20 15:37  周建豪  阅读(733)  评论(0)    收藏  举报