css基本语法简单介绍

css基本语法简单介绍:
本章节介绍一下css的基本语法,比较适合于初学者阅读,对于稍有经验的人员来说,几乎没有太多帮助,可以略过。
使用css的方式主要以下三种:

1.行内样式
2.内嵌样式
3.外联样式

当然可能不同的教材中的名称有所不同,不过实质都是一样的,不必太过纠结。
下面分别介绍一下上面三种方式的使用。
一.行内样式:
所谓的行内样式就是通过标签的style属性,将css代码写在标签之内,代码如下:

<div style="color:blue">softwhy.com</div>

优点是使用简单,缺点也是非常的明显,违背了表现与内容分离的原则,所以不推荐使用。
二.内嵌样式:
内嵌样式就是讲css代码写到<style>标签之中,代码如下:

<style type="text/css">
div{
  font-size:12px;
  color:green;
}
</style>

通常情况下<style>标签要放在头部,当然也可以放在其他的地方。此中方式的应用的有点也是非常的简单方便,但是如果css代码较多的话,就会使页面非常的庞大。
三.外联样式:
外联样式,就是将一个css文件引入当前页面,代码如下:

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

当css代码较多的时候,推荐使用此方式。
四.常用选择器:
当然常用的选择器有很多中,因为本章节是针对的初学者,所以介绍一下最为基础和常用的选择器。

1.HTML标签选择器
2.群组选择器
3.包含选择器
4.Class选择器
5.ID选择器

这里就不一一介绍了,可以参阅相关文章即可。
相关阅读:
1.标签选择器可以参阅CSS的类型选择符(E)一章节。
2.群组选择器选择器可以参阅CSS的选择器分组一章节。
3.包含选择器选择器可以参阅CSS的包含选择符(E F)一章节。
4.class选择器可以参阅CSS的class选择符一章节。
5.id选择器可以参阅CSS的id选择器一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15647

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-12-28 11:49:07

css基本语法简单介绍的相关文章

【玩转微信公众平台之七】 PHP语法简单介绍

经过多篇的努力,我们终于成为了微信公众平台的开发者.但是别高兴的太早,就跟修真小说一样:修炼多年武破虚空,飞升到仙界后本以为成为了天仙即可跳出三界外,不在五行中.可实际到了仙界才发现,成仙只是修行的第一步......没错,成为开发者也才只是第一步,因为现在你的微信公众平台还没有任何功能,说难听点就是小白,说好听点就是白马王子,说可爱点就是小白白,说黄色点就是洗白白,说...----------------要想在微信公众平台添加功能,那就需要写代码:既然说到写代码,那么肯定是要用php(如果用AS

Smali语法简单介绍

Smali语言其实就是Davlik的寄存器语言: Smali语言就是android的应用程序.apk通过apktool反编译出来的都有一个smali文件夹,里面都是以.smali结尾的文件,文件的展示语言. Smali语法简单介绍如下: Davlik字节码中,寄存器都是32位的,能够支持任何类型,64位类型(Long/Double)用2个寄存器表示: Dalvik字节码有两种类型:原始类型:引用类型(包括对象和数组)   原始类型:v   void  只能用于返回值类型 Z   boolean

shell语法简单介绍

一.基本的语法 1.1.shell文件开头 shell文件必须以以下的行開始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的參数是用来运行该文件的程序.在这个样例中我们使用/bin/sh来运行程序. 当编辑好脚本时,假设要运行该脚本,还必须使其可运行. 要使脚本可运行: 执行chmod +x filename 这样才干用./filename 来执行 1.2 凝视 在进行shell编程时,以#开头的句子表示凝视,直到这一行的结束.我们真诚地建议您在程序中使用凝视. 假设

XML语法简单介绍

第一部分 XML相关的背景知识 XML的全称是Extesiable Markup Language,翻译为可扩展的标记性语言 跟JSON一样,是一种用于交互的数据格式 也叫XML文档(XML Document) 举例: <videos> <video name="妖精的尾巴",age="18"/> </videos> 其中videos和video都称作是元素或者节点 第二部分 XML语法知识简介 XML由以下三种组成 1 文档声明

关于css和html简单介绍

css CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 Css例子 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: H1{color:blue;front-size:12px} Color是属性 blue是值  front-size是属性

DJango模块语言(DTL)语法简单介绍

DTL 变量 {{ 变量 }},变量里面可以包含 . 标签{% 代码块 %} 过滤器 { { 变量|过滤器 }} 注释{# 代码块或者html都可以被注册 #} 变量 如果变量中含有点:则解析顺序如下 如{{book.id}}: 1. 当做一个字典处理 2. 属性或者方法查询(方法不用带小括号) 3. 当做列表或者元组查询,把id当做索引 4. 在模板中调用方法不能传递参数,因为模板里面不能写小括号. 标签 for标签 { %for ... in ...%} 循环逻辑 {{forloop.cou

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

css的after伪对象选择器简单介绍

css的after伪对象选择器简单介绍:本章节将会介绍一下after伪对象选择器的用法,希望能够给需要的朋友带来一定的帮助.此选择器前面要加两个点:或者四个点::,两个点的时候是css2中的写法,在css3中规定是四个点,这是为了和伪类选择器进行区别,当然当前两个点也是适用的.语法结构: E:after{ Rules } E::after{ Rules } 此选择器能够设置元素内部结尾的一些结构内容 通常和content属性一起使用,关于content可以参阅CSS的content属性一章节. 

client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比較慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简单介绍 React是近两年非常流行的框架 流行到什么程度呢? 我看了一下Github上的数据 React达到了5w8+的star 在JavaScript中star排名第4 受欢迎程度可见一斑