我们第一天说了简单的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. 蓝桥杯-四平方和-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. poj1410计算几何线段相交

    You are to write a program that has to decide whether a given line segment intersects a given rectan ...

  3. java线程(四)

    java5线程并发库 线程并发库是JDK 1.5版本级以上才有的针对线程并发编程提供的一些常用工具类,这些类被封装在java.concurrent包下. 该包下又有两个子包,分别是atomic和loc ...

  4. Chrome DevTools 的 Queueing、Stalled解析

    https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-t ...

  5. JAVA的HashTable源码分析

    Hashtable简介 Hashtable同样是基于哈希表实现的,同样每个元素是一个key-value对,其内部也是通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长.Hashtable ...

  6. JAVA并发编程实战---第三章:对象的共享

    在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程序中,要对内存操作的执行顺序进行判断几乎无法得到正确的结果. 非原子的64位操作 当 ...

  7. Java_中建立0-10M的消息(字符串)

    直接用StringBuilder,它的append方法方便快速构建字符串. StringBuilder sb1=new StringBuilder(); for(int i=0;i<1024*1 ...

  8. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  9. Win下安装MySQL 5.6

    最近身边有人要win下安装mysql 去学习数据库,问我如何安装MySQL,其实win 下安装要比Linux简单的多,直接运行安装包下一步安装即可. 1.首先我们运行mysql-installer-c ...

  10. Unity中提升像素字体清晰度

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.6.0f3 Unity UI系统是非常好的,但默认情况下,使用像像素艺术风格游戏那样需要非常锋利的边框的字体 ...