我们第一天说了简单的HTML,第二天说了简单的CSS.那么今天.咱们就来说一说他们的结合如何使用吧!

首先说引用方式,和使用方法吧!
　　1.内部样式表.(放入<head>中)

 <head>

     <style>

         div{

4                 color:red:

5     }

     </style>

 <head>

[提示]:红色区域是样式,和元素选择器　

　2.内联样式表(写在标签里的样式)

<p style="color: red;"></p>

注意:语法一定要是style =""双引号里面的属性和属性值哦!

　　3.外部样式表(引入外部CSS样式表)最好也是放在head里面

 <head>

         <link rel="stylesheet"  href="xxx.css">
　　</head>

注意:其中"stylesheet" //样式表

　　href //地址

　　xxx.css中的xxx就是文件名,并且是你自定义的文件名!(后缀名.css不能改哦!)

还有就是CSS选择器!选择器是CSS样式表中重要的组成部分

CSS选择器

　　1.元素选择器

div,p,span,hr,等等很多直接用元素接花括号的 都是元素选择器

　　2.ID选择器(id)

我们在样式表中用id属性值修改标签属性,样式.

语法:

 <div id="div_id">

 //div_id    id属性和属性值

 </div>

 //在style里使用

 //用法 ID选择器开头必须有#

 <style>

     #div_id{

              width:100px;//div 宽100像素

              height:100px;//高100像素
　　　　　　　　　　background:red;//背景颜色是红色;

 }

 </style>

然后呢,他的效果就是这样的:

今天就写这么多吧!然后呢..........我打算弃坑了!因为 我的讲师说 我们要写点高大上的东西 不要写基础了!所以 我就果断弃坑了!以后有时间 我再继续更这个吧!!!

CSS 简单了解(二)的更多相关文章

  1. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  2. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  3. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  4. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇—Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

  5. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  6. 使用C语言实现二维,三维绘图算法(3)-简单的二维分形

    使用C语言实现二维,三维绘图算法(3)-简单的二维分形 ---- 引言---- 每次使用OpenGL或DirectX写三维程序的时候, 都有一种隔靴搔痒的感觉, 对于内部的三维算法的实现不甚了解. 其 ...

  7. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  8. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  9. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

随机推荐

  1. 工资不高也要给自己放假 这几款APP估计你用得上

    我是这样的一个人,我宁愿工资不高,只要给我足够的假期,那我就满足了.都说上班就是为了赚钱,但如果身体不好,赚再多的钱也是无福享受,所以建议各位,有机会的话,一定要抽出时间去旅游,去放松. 现在我们外出 ...

  2. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 E - Super Jumping! Jumping! Jumping!

    https://vjudge.net/contest/68966#problem/E http://blog.csdn.net/to_be_better/article/details/5056334 ...

  3. JavaScript高级程序设计 第三章 基本概念

    ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...

  4. Xmind 体验分享

    Xmind 8 体验 初识思维脑图 这两天在学习使用思维脑图(xmind是其中一款软件)ing,在体验了一把思维脑图的使用后,深深感受到了脑洞大开的魔力. 从昨晚开始研究使用,到今天晚上截止,自己试着 ...

  5. C++高精度模板

    原文地址:http://blog.csdn.net/wall_f/article/details/8373395 原文只附代码,没有解析,本文增加了一些对代码的解释. 请注意:本模板不涉及实数运算与负 ...

  6. 异步工作流控制-condCall

    在JavaScript编程中,异步操作一直是一个问题,回调是一种深层次的嵌套处理方式,我们也可以把嵌套处理转为直线处理以简化异步处理.有过prolog和erlang编程了解的同学可能对模式匹配有深刻的 ...

  7. 在Windows上安装MongoDB

    原文官方文档:https://docs.mongodb.org/v2.6/tutorial/install-mongodb-on-windows/ 基于版本:MongoDB 2.6 概览 通过这个示例 ...

  8. 调停者(Mediator)模式

    调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从而使它们可以较松散地耦合.当这些对象中的某些对象之间的相互作用发生改变时,不会立即影响到其他的一些 ...

  9. springMVC---简介

    SpringMVC介绍 为什么要使用springMVC? 很多应用程序的问题在于处理业务数据和显示业务数据的视图的对象之间存在紧密耦合.通常,更新业务对象的命令都是从视图本身发起的,使视图对任何业务对 ...

  10. Windows8.1 + Nvidia cuda8.0 + Vs2015

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Vs2015 1.查看本机配置,查看显卡类型是否支持NVIDIA GPU选中计算机-->右键属性-->设备管理 ...