<pre name="code" class="html">Css 简洁

css 选择器

标签选择器

类选择器

ID选择器

Css 层叠样式表   Cascade Stytle Sheet

css 就像网页的化妆品,让你可以随意的把相同的内容转换成

不一样的外观,把就是给相似的结构以不同的样式。

css+div 是当前最流行的前台美工技术,也是web标准推荐的。

使用样式表css,让p标签进行统一变色

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red; }
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</cenetr> </body>
</html> p{
color:red; } 这样就对所有的p标签的问题,统一使用红颜色。 标签选择器: p{font-size:2em;} 类选择器: .开头 .info{background:#ff0;} <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
font-size:2em;
}
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</p> <!--<font color="red"> 白日依山尽,</font><br>-->
<li> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li> 欲穷千里目,</li>
<li> 更上一层楼。</li> </cenetr> </body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
list-style:none;
font-size:2em;
}
.first{
color:red;
}
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</p> <!--<font color="red"> 白日依山尽,</font><br>-->
<li class=first> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li> 欲穷千里目,</li>
<li> 更上一层楼。</li> </cenetr> </body>
</html> ID选择器: #third{
color:green;
} <!--<font color="red"> 白日依山尽,</font><br>-->
<li class=first> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li id="third"> 欲穷千里目,</li>
<li> 更上一层楼。</li> 组合选择器:
												

CSS简介和CSS选择器的更多相关文章

  1. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  2. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  3. CSS简介,基础选择器,字体属性,文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  4. form表单,css简介,css选择器,css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  5. css简介以及css的添加方法

    什么是css? CSS是Cascading Style Sheets的简称,CSS是用来美化网页中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. css的基本语法 1.选择 ...

  6. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. Bulma CSS - 简介

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...

  8. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  9. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

随机推荐

  1. IOS 指纹识别的简单使用

    首先导入LocalAuthentication框架 然后导入头文件 #import <LocalAuthentication/LAPublicDefines.h> - (void)begi ...

  2. BZOJ 3907: 网格( 组合数 + 高精度 )

    (0,0)->(n,m)方案数为C(n,n+m), 然后减去不合法的方案. 作(n,m)关于y=x+1的对称点(m-1,n+1), 则(0,0)->(m-1,n+1)的任意一条路径都对应( ...

  3. STL中copy算法

    STL中通过使用copy函数以提供一种方便的方式来输出容器中的元素.函数copy作为泛型算法的一部分,任何容器类型都可以使用.由于我们需要频繁的初始容器的元素,因此在继续讨论容器之前,先学习一下cop ...

  4. 如何配置和使用Tomcat访问日志

    配置位置在log下的server.xml,(tomcat容器) <Engine defaultHost="localhost" name="Catalina&quo ...

  5. SpringBoot接口服务处理Whitelabel Error Page(转)

    To switch it off you can set server.error.whitelabel.enabled=false http://stackoverflow.com/question ...

  6. 数据切分——Mysql分区表的建立及性能分析

    Mysql的安装方法可以参考: http://blog.csdn.net/jhq0113/article/details/43812895 Mysql分区表的介绍可以参考: http://blog.c ...

  7. 基于visual Studio2013解决C语言竞赛题之0307函数求值

      题目 解决代码及点评 这又是个条件函数,但是这个函数无法用switch来解决,因为switch只能用于和某条件相等情况下,而这个函数的范围是无穷的 遇到这种问题,我们还是需要用复合的if语 ...

  8. BZOJ 1607: [Usaco2008 Dec]Patting Heads 轻拍牛头

    1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 Description   今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏.     贝茜让N(1≤N≤10 ...

  9. BZOJ 3240([Noi2013]矩阵游戏-费马小定理【矩阵推论】-%*s-快速读入)

    3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec   Memory Limit: 256 MB Submit: 123   Solved: 73 [ Submit][ St ...

  10. COM组件

    COM组件   COM component(COM组件)是微软公司为了计算机工业的软件生产更加符合人类的行为方式开发的一种新的软件开发技术.在COM构架下,人们可以开发出各种各样的功能专一的组件,然后 ...