css语法

id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#para1

{

    text-align:center;

    color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>

class选择器：

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

p.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

</html>

css的简单使用的更多相关文章

  1. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  2. Html5 和 CSS的简单应用

    本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...

  3. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  4. html css的简单学习（二）

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  5. html css的简单学习

    html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...

  6. css实现简单的告警提示动画效果

    需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...

  7. css实现简单音乐符效果

    css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...

  8. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  9. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

随机推荐

  1. Linux 笔记 - 第十一章 正则表达式

    博客地址:http://www.moonxy.com 一.前言 正则表达式(英语为 Regular Expression,在代码中常简写为 regex.regexp 或 RE),是使用单个字符串来描述 ...

  2. 读取用户输入并判断的bash脚本

    #!/bin/bash echo -e "1) A"echo -e "2) B"echo -e "3) C"echo -e "4) ...

  3. 导出wordpress数据库Fatal error: Cannot 'break' 2 levels

    今天我打算备份一下我在Linux下用宝塔面板搭建的phpmyadmin导出wordpress数据库.选择数据库后给我一个Fatal error: Cannot 'break' 2 levels in ...

  4. C# 时间戳的相关操作

    一般的 时间戳 格式分为两种 即 10位(秒)时间戳 与 13位(毫秒)时间戳 时间戳 类型也分为两种 即 本地时间戳 与 世界统一(UTC)时间戳 废话不多说,直接上代码: 一.时间戳获取方法 // ...

  5. json入门初体验

    json是JavaScript对象表示法,也是轻量级的文本数据交互格式,独立于语言,能够自我描述 json文本格式在语法上与创建JavaScript对象代码相同,多以json不需要解析器,js程序能够 ...

  6. [Mathematics][MIT 18.03] Proof of a Theory about the Solution to Second-order Linear Homogeneous Differential Equation

    At first, I'd like to say thank you to MIT open courses which give me the privilege to enjoy the mos ...

  7. 利用threading模块开线程

    一多线程的概念介绍 threading模块介绍 threading模块和multiprocessing模块在使用层面,有很大的相似性. 二.开启多线程的两种方式 1.创建线程的开销比创建进程的开销小, ...

  8. .NET进阶篇-语言章-1-Generic泛型深入

    内容目录 一.概述二.泛型的好处三.泛型使用1.泛型方法2.泛型类.泛型接口四.泛型的功能1.泛型中的默认值2.约束3.协变逆变5.泛型委托4.泛型缓存五.总结 一.概述 泛型我们一定都用过,最常见的 ...

  9. spring5 源码深度解析----- 创建AOP代理之获取增强器

    在上一篇的博文中我们讲解了通过自定义配置完成了对AnnotationAwareAspectJAutoProxyCreator类型的自动注册,那么这个类到底做了什么工作来完成AOP的操作呢?首先我们看看 ...

  10. Future类型的连锁的运用

    Future类型的连锁的运用: 洗脸 刷牙 吃早饭 看电视 出门 串行: import scala.concurrent.{Await, Future} import scala.util.{Fail ...