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. HTTP协议详解(经典)

    转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...

  2. meta标签中设置apple-itunes-app的意义

    告诉iphone的safari浏览器:这个网站对应的是哪个app <meta name="apple-itunes-app" content="app-id=589 ...

  3. Javascript模块化编程(一)模块的写法最佳实践

    Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块但是,Javascript不是一种模块化编程语言,它不支持类clas ...

  4. Python学习笔记（六）Python组合数据类型

    在之前我们学会了数字类型,包括整数类型.浮点类型和复数类型,这些类型仅能表示一个数据,这种表示单一数据的类型称为基本数据类型.然而,实际计算中却存在大量同时处理多个数据的情况,这种需要将多个数据有效组 ...

  5. 策略模式(Strategy)（策略类，场景不同策略不同，环境策略分离组合，）

    (定义一组算法,将每个算法都封装起来,并且使它们之间可以互换.)   例:button 与 listener ,在使用时具体根据情况实例化listener,做不同的操作. 背景 在软件开发中常常遇到这 ...

  6. 加载selenium2Library失败---robotframework环境搭建（site-packages下无selenium2library文件夹）

    加载Selenium2library失败,检查D:\Python27\Lib\site-packages 目录下是否有Selenium2Library 目录,没有该目录,事情就尴尬了. 自己安装的版本 ...

  7. linux交换两个文件的文件名

  8. ML面试1000题系列（41-50）

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 41. #include和#include“fi ...

  9. PHP--y2k38的解决方法已经时间格式的常用转换

    y2k38又名千年虫问题,又称Uinx Millennium Bug,此漏洞将会影响到所有32位系统下用Unix时间戳整数来记录时间的PHP,及其它编程语言. 一个整型的变量所能保存的最大时间为203 ...

  10. Spring Boot：Boot2.0版本整合Neo4j

    前面介绍了Boot 1.5版本集成Neo4j,Boot 2.0以上版本Neo4j变化较大. 场景还是电影人员关系 Boot 2.0主要变化 GraphRepository在Boot2.0下不支持了,调 ...