今天开始学习css;应用一本《HTML5与CSS3网页设计基础》

先学习css样式规则声明。

Body{ color:blue}

对应:选择符:{声明属性:声明值};

Background-color:属性

Body{ Background-color:yellow}

配置元素背景颜色css属性是Background-color:,颜色是黄色

Color属性

Body{ color:red}

配置文本颜色css属性是color,颜色是红色。

配置背景颜色也文本颜色

Body{ Background-color:yellow  color:red }

注意:css语法允许通过多种方式配置颜色:

l  十六进制颜色值

l  十六进制短颜色值

l  十进制颜色值(RGB三元组)

l  Css3新增的HSL

配置css方式有四种:内联,嵌入,外部和导入。

Style属性

<h1 style=“color:#cc0000”>

如果属性不止一个,用;分割开。

<h1 style=“color:#cc0000 Background-color:yellow”>

将全局body标记配置成白底绿字。这种样式也会被其他元素继承

<Body style=“Background-color:yellow  color:#cc0000”>

h1元素配置成绿底白字。将覆盖body元素的全局样式。

<h1 style=”background-color:#008080; color:#F5F5F5;”>

内联样式并不常用。它的效率并不高,并且会给网页带来额外的代码。不便于维护。

配置嵌入的css

嵌入样式将于与整个文档,这些样式将要放在head部分的<style>中,以<style>开始,以</style>结束。

代码为

<head>

<style>

Body{

Background-color:#CCFFFF;

Color:#000033;

</style>

</head>

}

嵌入的css样式可以用于h1,h2,div,p,ul,ol,li,等元素

在head中配置body,h1,h2

<style>

Body{background-color:#E6E6F6;color:#191970;}

h1{background-color:#E6E6F6;color:#191970;}

h2{background-color:#E6E6F6;color:#191970;}

配置外部css

当css位于网页文档内部时,css的灵活性与强大才真正显露无遗。

外部样式是包含css样式规则的文本文件,使用. Css拓展名。通过link相关联。因此,多个网页可以共同关联同一个. Css文件。

Link元素

Rel属性值是“stylesheet”

Href属性值是“.css”文件名

Type属性值是“text/css”

例如在head中加入一下代码,将网页和外部样式表与color.css关联。

<link rel=”stylesheet” href=””color.css”>

开始学习css的更多相关文章

  1. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  2. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

  5. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  6. 学习CSS的思路(转)

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  7. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  8. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  9. css学习--css基础

    学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...

随机推荐

  1. Emeditor批量修改文件编码格式(UTF-8)

    采用宏的形式进行,直接在Emeidor导入宏即可使用: emeditor导入宏:[宏]->[自定义]->[新建]->找到EncodingChange.jsee文件即可. 链接:htt ...

  2. 测试--jmeter的使用

    jmeter用于压力测试 首先我们要区别压力和攻击,当设立了不适当的线程数量和准备时长,就容易造成攻击. 线程数:虚拟用户数.一个虚拟用户占用一个进程或线程.设置多少虚拟用户数在这里也就是设置多少个线 ...

  3. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  4. XmlElement可以避免由XmlSerializer多余生成的代码

    public class Program { static void Main(string[] args) { var alarm = new Alarm() { Code = "1588 ...

  5. jquery slideDown slideUp 对于table无效

    jquery slideDown slideUp 对于table无效,需要在table外面套一层div才可以使用

  6. Java 多线程(一) 基础知识与概念

    多线程Multi-Thread 基础 线程概念 线程就是程序中单独顺序的流控制. 线程本身不能运行,它只能用于程序中. 说明:线程是程序内的顺序控制流,只能使用分配给程序的资源和环境. 进程 进程:执 ...

  7. var,dynamic的用法

    private void Form1_Load(object sender, EventArgs e) { var dt = Getuser() as IEnumerable<dynamic&g ...

  8. 云计算概述和KVM虚拟化

    前言: 近些年一直听着 虚拟化.云计算.公有云.私有云.混合云这些个概念,一直想着....这些概念要用什么技术实现? 一.云计算的概念 1.传统IDC机房面都会临什么问题? 任何新事物都是由需求催生的 ...

  9. 软件151 王楚博 JavaEE的配置

    一.准备以下压缩包 1.JDK1.7 文件:jdk1.7.rar 2. eclipse-jee-mars-2 文件:32位系统准备eclipse-jee-mars-2-win32.zip,64位系统准 ...

  10. SVG路径path的贝塞尔曲线指令

    深度好文分享: http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ ...