我们第一天说了简单的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. 在同一个系统上装两个不同版本的jdk，配置环境变量不起作用，jdk版本的切换问题

    本人这台笔记本前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path 下添加如下变量,记得 ...

  2. python3.x元组打印错误 TypeError: unsupported operand type(s) for %: 'NoneType' and 'tuple'

    原创by南山南北秋悲 欢迎引用!请注明原地址:http://www.cnblogs.com/hwd9654/p/5676746.html  谢谢! TypeError: unsupported ope ...

  3. 阿里云CentOS-7.2安装mysql

    我下载的阿里云的服务器系统centos7.2是纯内核版本,并没有其他的工具,所以这个系统是非常干净的.所以我就需要给系统安装一一些工具,来方便系统的管理与操作,我们上面讲到了关于服务器的yum的配置在 ...

  4. OSI七层模型学习笔记

    1.简介 什么是OSI模型呢? OSI模型全名Open System InterConnect 即开放式系统互联,是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架, ...

  5. poj3304计算几何直线与线段关系

    Given n segments in the two dimensional space, write a program, which determines if there exists a l ...

  6. DCalendar增加月份选择功能--简单jQuery日期选择器插件改动

    做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...

  7. vue视频学习笔记05

    video 5 vue2.0:bower info vue http://vuejs.org/到了2.0以后,有哪些变化? 1. 在每个组件模板,不在支持片段代码组件中模板:之前:<templa ...

  8. Linux使用Jexus托管Asp.Net Core应用程序

    第一步 安装.Net Core环境 安装 dotnet 环境参见官方网站 https://www.microsoft.com/net/core. 选择对应的系统版本进行安装.安装完成过后 输入命令查看 ...

  9. yaf学习之——yaf安装

    yaf的github源码地址 https://github.com/laruence/yaf 第一步: 下载dll扩展: http://pecl.php.net/package/yaf/2.3.5/w ...

  10. System.arraycopy(src, srcPos, dest, destPos, length) 与 Arrays.copyOf(original, newLength)区别

    //System.arraycopy,只拷贝已存在的数组元素 int[] src = {0, 1, 2}; int[] dest = new int[3]; System.arraycopy(src, ...