第十一节:CSS简介

为网页添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: red;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>现在开始添加样式</h1>
</body>
</html>

head中的style标签内的就是css代码,使用css代码可以定义样式等
CSS规则= 选择器 + 声明快

选择器

1、ID选择器
选中的是对应id值的元素
书写样式

#id名称{
  样式名称...
}

2、元素选择器
直接书写元素名称,即可选择元素并且定义元素样式
选择器:选中元素

#元素名称{
  样式名称...
}

3、类选择器

.class名称{
  样式名称...
}

声明块

出现在大括号中
声明块中包含很多声明(属性),每一个声明表达了某一方面的属性改变

CSS代码书写位置

1、内部样式表
书写在style标签中

2、内联样式表,元素样式表
直接在元素标签内加入style添加样式

    <h1 style="color: red;">现在开始添加样式</h1>

3、外联样式表
将样式书写到独立的css文件中

<link rel="stylesheet" href="">

1、外部样式表可以解决多个页面样式重复的问题
2、有利于浏览器缓存,从而提高页面响应速度
3、有利于代码分离,更容易阅读和维护

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,150评论 0 40
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,304评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,662评论 0 30
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,366评论 0 7
  • CSS定义: CSS 指层叠样式表 (Cascading Style Sheets) CSS通常称为CSS样式表或...
    显然2017阅读 885评论 0 8