CSS 语法

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

selector {
                  property: value;
                  property: value;
             ...  property: value
         
          }
如:h1 {color:red; font-size:14px;}

css的四种引入方式

1.行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

<p style="color: aqua">pppppp</p>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>

3 链接式(推荐使用)

将一个.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.导入式

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

<style type="text/css">

 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style> 
 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

css选择器

基本选择器

组合选择器

E,F   多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔      :div,p { color:#f00; }

 
E F   后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;}
 
E > F   子元素选择器,匹配所有E元素的子元素F            :div > p { color:#f00; }
  
+ F   毗邻元素选择器,匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟选择器(以破折号分隔)                 :.div1 ~ p{font-size: 30px; }

注意,关于标签嵌套:

一般,块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。需要注意的是,p标签不能包含块级标签。

属性选择器

E[att]          匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。

                比如“[cheacked]”。以下同。)   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

css初探的更多相关文章

  1. javafx之CSS初探

    文档:http://www.haogongju.net/art/1807238 javafx中的css元素必须有-fx-前缀. 一.介绍 java8中新增了javafx.css开放了css相关api. ...

  2. CSS 初探

    Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的.通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好.但是没有html,css就 ...

  3. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. CSS Spritec下载,精灵图,雪碧图,初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  6. CSS 预处理器(框架)初探:Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  7. CSS居中初探

    刚刚度过了实习期,进入了试用期.试用期依然会安排学习的任务.在学习中发现css的居中十分常用,做一个小小的探索. 一.水平居中 1.行内元素 可以直接使用text-align:center来解决.例如 ...

  8. 初探CSS

    css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 又一次认识HTML,CSS,Javascript 之node-webkit 初探

    今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描写叙述网页的一种语言. HTML 包括一些根节点.子节点,文本节点.属性 ...

随机推荐

  1. 第一个项目:Python pygame——外星人大战(心得)

    2018年12月,作为一个大学专业是物联网工程,毕业后在一家石油行业国企干了近三年,但内心依然有着一颗技术之心的我,通过一次偶然的机会(也许并不偶然),接触到了python.当时抱着玩一玩的心态开始通 ...

  2. Linux复制粘贴快捷键

    1. 在终端下: 复制命令:Ctrl + Shift + C 组合键.粘贴命令:Ctrl + Shift + V 组合键. 2. 在控制台下: 复制命令:Ctrl + Insert 组合键 或 用鼠标 ...

  3. Jmeter录制脚本过程及Could not create script recorder报错、您的连接不是私密连接报错

    转载自    https://www.cnblogs.com/wwho/p/7173172.html Jmeter录制脚本过程及Could not create script recorder报错.您 ...

  4. linux 安装多个版本JDK,指定tomcat的jdk版本

    JDK的下载可以直接到官网下载,这里不再介绍 一.安装JDK 7 vi /etc/profile #set java environmentexport JAVA_HOME=/usr/java/jdk ...

  5. JQuery 240中插件

    http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

  6. python json.dumps(output) ^ SyntaxError: invalid syntax

    问题 下面代码在有些机器上执行正常,有些机器上执行报错: import json output={} print json.dumps(output) python代码报错: line 277 pri ...

  7. FFMPEG Qt视频播放器

    本文是根据PaintEvent事件处理函数不停在组件中绘制视频帧数据 做过图像界面开发的都知道,任何耗时的操作都不能放在主线程进行,一旦主线程阻塞了,那么体现出来的就是界面卡了. 而我们读取视频和解码 ...

  8. jQuery自定义扩展写法

    jQuery自定义扩展有两种写法: $.extend({}) ;           调用方法:      $.方法          $.fn.extend({});        调用方法:    ...

  9. oracle中delete、truncate、drop的区别

    oracle中delete.truncate.drop的区别 标签: deleteoracletable存储 2012-05-23 15:12 7674人阅读 评论(0) 收藏 举报  分类: ora ...

  10. Windows Azure Virtual Network (12) 虚拟网络之间点对点连接VNet Peering

    <Windows Azure Platform 系列文章目录> 在有些时候,我们需要通过VNet Peering,把两个虚拟网络通过内网互通互联.比如: 1.在订阅A里的Virtual N ...