后面就将要介绍css的全面语法:

1.css介绍

2.css基本语法

3.css高级语法

4.css派生选择器

5.css的id选择器

6.css类选择器

7.css属性选择器

!!!!!css介绍

css是层叠样式表,极大地提高了效率

!!!!!!css的基本语法

selector{

property:value

}

1.属性大于一个后,要用分号分开 eg:h1{color:red;font-size:14px}

2. 如果属性值大于一个单词,要用“”包围。eg:p{font_family:”sans serif”}

!!!!!css高级语法

1.选择器分组:h1,h2,h3,h4,h5,h6{color:red}

2.继承:body{color:green} ,如果在body定义了样式,body里面的元素如果没有声明样式,会继承body的属性

!!!!代码实例 ,index代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Html5样式</title>
  6. <link href="MyCss.css" type="text/css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <h1>这是一个样式</h1>
  10. <a href="http://www.baidu.com">百度一下</a>
  11. <h2>这是标题2样式</h2>
  12. <h3>这是H3样式</h3>
  13. </body>
  14. </html>

css代码

  1. h1,h2,a{
  2. color: blue;
  3. }

!!!@!效果图

继承实例,index代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Html5样式</title>
  6. <link href="MyCss.css" type="text/css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <h1>这是一个样式</h1>
  10. <a href="http://www.baidu.com">百度一下</a>
  11. <h2>这是标题2样式</h2>
  12. <h3>这是H3样式</h3>
  13. <p>这是一个段落</p>
  14. </body>
  15. </html>

css代码

  1. h1,h2,a{
  2. color: blue;
  3. }
  4. body{
  5. color:red;
  6. }
  7. p{
  8. color:chartreuse;
  9. }

!!!效果图

css3学习之旅-css的基本语法(1)的更多相关文章

  1. CSS3学习笔记(2)-CSS盒子模型

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  2. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  3. web开发学习之旅---css第一天

    一.css全称 Cascade Style Sheet层叠样式表 二.css引入方式 行内样式:<h2 style="color:#0F0">Hello World&l ...

  4. Css的学习之旅-css的选择器(2)

    1.最常用的是派生选择器:eg:ul li{ color:red} 2.id选择器:eg:#id{color:red} 3.类选择器:设置标签的class = "",类似id.用点 ...

  5. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  7. 【学】React的学习之旅1

    React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...

  8. Java web 学习之旅

    java web学习之旅 来公司十天了,感觉已经慢慢地融入了这个环境中,几个学长人都很好,都是在他们帮助下,我才能比较顺利的开始了学习java web的旅途. 来这里学习的第一个阶段是做一个简单的用户 ...

  9. WCF学习之旅—实现支持REST客户端应用(二十四)

    WCF学习之旅—实现REST服务(二十二) WCF学习之旅—实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持RES ...

随机推荐

  1. WebRTC 音频算法 附完整C代码

    WebRTC提供一套音频处理引擎, 包含以下算法: AGC自动增益控制(Automatic Gain Control) ANS噪音抑制(Automatic Noise Suppression) AEC ...

  2. Bootstrap3 栅格系统-实例:流式布局容器

    如何让小屏幕设备上所有列不堆叠在一起,使用针对超小屏幕和中等屏幕设备所定义的类就可以做到,即 .col-xs-* 和 .col-md-*.举例: <!-- Stack the columns o ...

  3. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  4. 计算机网络之TCP协议与UDP协议

    运输层向它上面应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最底层. 两个主机进行通信实际上就是两个主机中的应用进程互相通信.应用进程之间的通信又称为端到端的通信. 应用层不同进 ...

  5. Docker学习笔记1:CentOS7 下安装Docker

    本文内容摘自官网:https://docs.docker.com/engine/installation/linux/centos/#/create-a-docker-group 注:本文是介绍Lin ...

  6. Swift3中如何为Array写一个限定Type的扩展

    我们知道Swift可以扩展已存在的类或结构,这些类或结构可以存在于标准库(或称为核心库)中.如果结构是一个集合类型(比如Array)就更有趣了.我们想尝试写一个限定Type数组的扩展,So我们就拿Ar ...

  7. Android 5.0新控件——TextInputLayout

    Android 5.0(M)新控件--TextInputLayout 介绍之前,先直观的看一下效果 TextInputLayout其实是一个容器,他继承自LinearLayout,该容器是作用于Tex ...

  8. android 网络获取json并且显示(2)

    1.将要的取得的json数据格式如下: 我们封装之前的类用google提供的JSONArray和JSONObject类对json字符串进行解析. 对于姚明显示每一条数据,我们封装了一个类如下: pub ...

  9. Android开发艺术探索——第二章:IPC机制(上)

    Android开发艺术探索--第二章:IPC机制(上) 本章主要讲解Android的IPC机制,首先介绍Android中的多进程概念以及多进程开发模式中常见的注意事项,接着介绍Android中的序列化 ...

  10. 给定整数a1、a2、a3、...、an,判断是否可以从中选出若干个数,使得它们的和等于k(k任意给定,且满足-10^8 <= k <= 10^8)。

    给定整数a1.a2.a3.....an,判断是否可以从中选出若干个数,使得它们的和等于k(k任意给定,且满足-10^8 <= k <= 10^8). 分析:此题相对于本节"寻找满 ...