css的概念以及初体验

概念：

CSS（cascading style sheet）也就是层叠样式表；它是一种网页设计的新技术，现在已经被大多数浏览器所支持，层位网页设计必不可少的工具之一。
优点：
    使得网页代码更少，网页下载速度更快
    实现了内容和样式的分离，使得网站维护更加便捷
    使得网站和浏览器兼容更好

css的编写方式

  • css的语法结构

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在css的三个组成部分中，对象是很重要的，他指定了对那些网页元素进行设置，因此他有一个专门的名称---选择器

  • 行内样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="color: red;font-size: 30px">这是css的初体验</div>

</body>

</html>
  • 内部样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        div{

            font-size: 29px;

            color: green;

        }

    </style>

</head>

<body>

    <div>css的初体验2</div>

</body>

</html>
    • 各种选择器
      • id选择器：ID选择器的id一定要唯一，千万别重复
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        /*标签选择器*/

        div{

            font-size: 29px;

            color: green;

        }

        /*id选择器*/

        #two{

            font-size: 50px;

            color:red;

        }

        span{

            color: yellow;

        }

        .three{

            /*类选择器*/

            color: deeppink;

        }

        .four span{

            /*包含选择器*/

            color: aquamarine;

            font-size: large;

        }

        div,span,h2{

            /*分组选择器*/

            color: #3300cc;

        }

        *{

            /*通用选择器*/

            background-color: green;

            color: #000;

        }

    </style>

</head>

<body>

    <div>css的初体验2</div>

    <div id="two">css的初体验2</div>

    <div class="three">css的初体验2</div>

    <div class="three">css的初体验3</div>

    <span>spawn标签</span>

`   <div class="four">

        <span>这是css里的spawn标签</span>

    </div>

    <h2>h2元素</h2>

    <input type="text">

</body>

</html>
    • 选择器的优先级：行内选择器>id选择器>类选择器>标签选择器>通用选择器

测试代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #show1{color:yellow}

        .show{color:pink}

        h1{color: red}

        *{color:green}

    </style>

</head>

<body>

    <h1 id="show1" class="show" >这是选择器优先级设置</h1>

</body>

</html>
    • 外部样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="a.css">

    <style type="text/css">

    </style>

</head>

<body>

    <div>css的初体验2</div>

        <div id="two">css的初体验3</div>

        <div class="three">css的初体验3</div>

        <div class="three">css的初体验3</div>

        <span>spawn标签</span>

    `   <div class="four">

        <span>这是css里的spawn标签</span>

    </div>

    <h2>h2元素</h2>

    <input type="text">

</body>

</html>

css样式文件如下：

#show1{color:yellow}

.show{color:pink}

h1{color: red}

css的基本属性

  • 文字、段落、背景属性

css的布局属性

浏览器兼容性问题

day15 web前端之css的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  7. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  8. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  9. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

随机推荐

  1. linux后台执行程序相关命令

    linux下我们如果想一个任务或者程序还后台执行可以使用&,实际上linux还提供了其他任务调度的命令. bg将一个在后台暂停的命令,变成继续执行 fg将后台中的命令调至前台继续运行 jobs ...

  2. 20190818 [ B ]-½

    请看到这个蒟蒻博客的人注意一下. 这是简单的[ B ]场考试,如果需要[ A ]场题解请去神犇们的blog. [ B ]场不需要题解,恩? 太蒟蒻了QAQ 考试过程: 怀着我是蒟蒻我怕谁的心情. 首先 ...

  3. Linux安装Desktop 和 vncserver

    sudo su - #使用 root 账户 yum grouplist #查看所有可用的group yum groupinstall GNOME Desktop #安装 GNOME 桌面 yum -y ...

  4. log4j2----JAVA日志打印

    注意:本篇文章是以log4j2.x 为例的,并不是log4j 1.x log4j 就是log for java  , log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中 ...

  5. maven和java版本的对应关系

      发布日期 版 必需的Java版本 链接 2018年6月21日 3.5.4 Java 7 宣布,发布说明,参考文档 2018年3月8日 3.5.3 宣布,发布说明,参考文档 2017年10月24日 ...

  6. vuex的简单教程

    首先安装vuex npm install vuex --save 然后创建store.js文件里写 import Vue from 'vue' import Vuex from 'vuex' Vue. ...

  7. 洛谷P1082 同余方程 [2012NOIP提高组D2T1] [2017年6月计划 数论06]

    P1082 同余方程 题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输 ...

  8. 有趣的HTML5 Web SQL 数据库

    Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 核心方法 以下是规范中定义的三个核心方法: openD ...

  9. Adding basic files · lcobucci/jwt@aad22ed · GitHub

    Skip to content   Features Business Explore Marketplace Pricing   This repository Sign in or Sign up ...

  10. JavaScript的注意事项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...