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. flutter 控制台快捷键

  2. InvokeRequired和Invoke(转)

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它.此时它将会在内部调用ne ...

  3. 【java】类的初识

    面向过程思想:强调的是功能行为 面向对象思想:不自己亲自做,将功能封装为对象,强调具备功能的对象,指挥对象实现各种功能.以后开发实际就是找对象使用对象,要是对象没有就创建对象并维护对象. 面向对象的三 ...

  4. Modbus RTU 协议使用汇总

    原创地址:https://blog.csdn.net/u012166958/article/details/64920144 标准的Modbus 口是使用RS-232C 兼容串行接口,它定义了连接口的 ...

  5. NSIS 制作简单安装包

    ;replace NSIS/Contrib/zip2exe/Modern.nsh;NSI format: Asni;http://nsis.sourceforge.net/ ;UAC级别Request ...

  6. Laravel 输出最后一条sql

    $queries = DB::getQueryLog(); $last_query = end($queries); print_r( $last_query);

  7. 【springboot】之利用shell脚本优雅启动,关闭springboot服务

    springbot开发api接口服务,生产环境中一般都是运行独立的jar,在部署过程中涉及到服务的优雅启动,关闭, springboot官方文档给出的有两种方式, 1.使用http shutdown ...

  8. Android 引用库项目,Debug 库项目

    转自:http://www.cnblogs.com/xitang/p/3615768.html#commentform 使用引用项目,无法追到源代码,无法Debug库项目The JAR of this ...

  9. 1.Linux命令

    所有文章都只做学习记录用! 一.Linux开发板操作命令 1.查看命令:  系统相关:           **任务管理器: gnome-system-monitor 查看系统版 :uname -a ...

  10. 【推荐】asp.net 页面的生命周期

    当一个页面请求发送到WEB服务器时,不论该事件是由页面提交还是由页面重定向而激发的,页面在其被创建到释放的过程中都会运行一系列的事件.一个ASP.NET页面从被创建到释放的过程包含10个事件. (1) ...