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. 2018-2019年中国CDN市场发展报告：阿里云成为中国CDN市场的领军者

    近日,权威ICT市场咨询机构计世资讯(CCW Research)发布<2018-2019年中国CDN市场发展报告>,报告显示,当前,随着新型信息技术在中国不断应用,以及互联网化新业务的快速 ...

  2. ios那些事之如何在ios5上运行gdb

    为啥要在ios上运行gdb? 这个问题见仁见智喽.对于搞开发的同学们来所, 有了gdb更方便跟踪分析别人的程序,取长补短:)这里不是教大家crack:) 运行环境: Mac OS 10.7.4 Xco ...

  3. ACdream 1112

    题目链接 Alice and Bob Time Limit: 6000/3000MS (Java/Others)Memory Limit: 256000/128000KB (Java/Others) ...

  4. warning: deprecated conversion from string constant to 'char*

    warning: deprecated conversion from string constant to 'char* #include<iostream> using namespa ...

  5. gomod

    package main import "mycore" func main(){ mycore.ShowName() } main.go module mytest requir ...

  6. 遍历list时删除元素的正确做法

    我们往往会遇到需要删除list中满足条件的元素.举例: List<string> list_str =new List<string>() { "A",&q ...

  7. python 数字编码

  8. mytop安装，使用mytop监控MySQL性能 (总结)

    mytop 是一个类似 Linux 下的 top 命令风格的 MySQL 监控工具,可以监控当前的连接用户和正在执行的命令. 1. 安装TermReadKey    下载地址:  wget  http ...

  9. 统计Linux下的CPU状态信息

    def cpu(): all_cpus=[] with open('e:/cpu.txt') as f: core={} for line in f.readlines(): ab=line.spli ...

  10. update批量更新某一列成其它列对应的值【原】

    update批量更新某一列成其它列对应的值 postgresql 标准sql语句 update AA set name = BB.name , AA.sex = BB.sex from BB wher ...