第一个css样式

来源：互联网发布：卜柯文淘宝星店编辑：程序博客网时间：2024/06/15 12:38

标签（空格分隔）： css

本文介绍如何声明以及使用css
1. 内联样式
直接在标签上声明就可以使用

<div style="height: 100px;width: 100px;background-color: #369;">内联样式</div>

2. 使用style标签
通常是在<head></head>标签内使用<style></style>来表示其内部是用来表示样式相关的代码，
通过不同的css选择器给相应的元素赋予不同的样式，比较常用的有.类选择器和#id选择器

<head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .class{            height: 100px;            width: 100px;            background-color: #963;        }        #id{            height: 100px;            width: 100px;            background-color: #936;        }    </style></head><body>    <div class="class">style-class</div>    <div class="id">style-id</div></body>

3. 通过link外部引用
link可以跨域引用，除了使用本地的文件，还可以使用远程文件
通常会将<link></link>标签放到<head></head>内

<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet">

这样就可以直接使用bootstrap内定义好的样式了
4. 通过@import引用
@import url('输入css地址')
不建议这样使用，因为当html加载完之后才会加载@import的。在IE下也会非常慢，大家可以无视@import了
demo地址
必读扩展知识
css选择器
css权重

1 0