一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS id和class选择器</title>

    <style>

    #para1 {

        text-align: center;

        color: red;

    }

    .center {

        text-align: center;

    }

    p.center {

        text-align: right;

    }

    </style>

</head>

<body>

    <p id="para1">hello</p>

    <p>this paragraph is not affected by the style.</p>

    <h1 class="center">标题居中</h1>

    <p class="center">段落居中</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS id和Class选择器的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  3. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  4. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  5. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  6. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  7. Web云笔记--CSS

    CSS CSS CSS Web自学第二阶段之CSS 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出 ...

  8. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  9. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

随机推荐

  1. Java作业六（2017-10-30）

    /*游戏引擎包,播放音乐*/ import com.rupeng.game.GameCore; public class Mc implements Runnable{ public static v ...

  2. React Native 填坑之神奇的报错，已解决

    下面对报错进行一下详细描述: 在debug时,点着点着,就会发生: 1.手机显示如下 : Attempted to transition from state `RESPONDER_INACTIVE_ ...

  3. [Swift]LeetCode43. 字符串相乘 | Multiply Strings

    Given two non-negative integers num1 and num2 represented as strings, return the product of num1and  ...

  4. [Swift]LeetCode64. 最小路径和 | Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  5. [Swift]LeetCode122. 买卖股票的最佳时机 II | Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  6. [Swift]LeetCode462. 最少移动次数使数组元素相等 II | Minimum Moves to Equal Array Elements II

    Given a non-empty integer array, find the minimum number of moves required to make all array element ...

  7. Python档案袋（ 面向对象 ）

    类即是一个模型,根据模型建立起不同的对象,对象间拥有共同的一些属性 简单的类: class P: #类变量,所有实例共享变量,推荐使用方法是:类名.类变量名 pvarx="ppvar1&qu ...

  8. asp.net core 系列 21 EF现有数据库进行反向工程

    一.概述 在上篇中使用EF基于数据模型创建数据库,  本篇继续使用 EF  基于数据库创建数据模型.  实现对已有数据库进行反向工程,来构建数据访问的 ASP.NET Core MVC 应用程序.已有 ...

  9. 使用Spring Cloud搭建高可用服务注册中心

    我们需要的,不仅仅是一个服务注册中心而已,而是一个高可用服务注册中心. 上篇博客[使用Spring Cloud搭建服务注册中心]中我们介绍了如何使用Spring Cloud搭建一个服务注册中心,但是搭 ...

  10. 初学Java Web(3)——第一个Servlet

    这学期 Java Web 课程的第一节课就简短复习了一下 Java 的一些基础知识,所以觉得 Java 的基础知识还是很重要的,但当我想要去写一篇 Java 回顾的文章的时候发现很难,因为坑实在太多了 ...