CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:



选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head> <body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

id 选择器

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

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

class 选择器

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

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

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color

background-image

background-repeat

background-attachment

background-position

以上也是简写属性是属性值的顺序;

浅学CSS的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. junit浅学笔记

    JUnit是一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓白盒测试,因为程序员知道被测试的软件如何(How)完成功能和完成什么样(Wh ...

  3. 浅学JavaScript

    JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...

  4. 轻轻松松学CSS:媒体查询

    轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...

  5. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  6. 浅学html

    数据库web端需要了解html等语言,就初浅学习一下 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  7. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  8. opengl 入门浅学(一)

    因为要做图形学的实验,又是要以OPENGL为基础,所以就稍微在网上查了一些资料. 我是带着目的去学习的,所以就没有打基础之类的学很深,浅尝. 今天试着搭简单框架,画出一个图形.大神请出门左转. #in ...

  9. 怎样学CSS?

    什么是CSS? CSS(Cascading Style Sheet,层叠样式表)是由W3C(万维网联盟)的CSS工作组创建和维护的.它是一种不需要编译,可直接由浏览器执行的标记性语言,用于控制Web页 ...

随机推荐

  1. IceStorm示例运行步骤

    又一次忘了,记下: 1.启动IceStorm服务,输入:icebox --Ice.Config=config.icebox 启动IceStorm服务.2.消息接收:开启另一个命令行窗口,Subscri ...

  2. windows 8 中 使用 httpclient

    基本技术点 windows 8 中 使用 httpclient 代替 windows phone 中的 httpwebclient , 使用方法 也有些不同 . 下面是windows 8种使用 htt ...

  3. 查看git提交细节

    git log git show fdf39277f54dd0484a9fefc012463924544e07af

  4. 【转载】COM 组件设计与应用(四)——简单调用组件

    原文:http://vckbase.com/index.php/wv/1211.html 一.前言 同志们.朋友们.各位领导,大家好. VCKBASE 不得了, 网友众多文章好. 组件设计怎么学? 知 ...

  5. SpringBoot中使用UEditor基本配置(图文详解)

    SpringBoot中使用UEditor基本配置(图文详解) 2018年03月12日 10:52:32 BigPotR 阅读数:4497   最近因工作需要,在自己研究百度的富文本编辑器UEditor ...

  6. 洛咕 P3321 [SDOI2015]序列统计

    显然dp就是设\(f[i][j]\)表示dp了i轮,对m取膜是j的方案数 \(f[i][xy\mod m]=f[i-1][x]\times f[i-1][y]\) 这是\(O(nm^2)\)的 像我这 ...

  7. 洛咕 P2468 [SDOI2010]粟粟的书架

    强行二合一啊... 前面直接二分最小值,二维前缀和.后面用主席树查最小值.注意要写\(nlogn\). // luogu-judger-enable-o2 #include<bits/stdc+ ...

  8. [SYZOJ279]滑♂稽♂树

    主♂席♂树♂裸♂题 https://syzoj.com/problem/279 https://oj.changjun.com.cn/problem/detail/pid/2425 // It is ...

  9. 按键精灵手机版多点找色,图片对比 by <剑行洪荒> 忠哥

    代码: Do    Dim ret1,ret2    Delay 500    ret1 = CmpColor(76,72, "153274", 0.9)    ret2 = Cm ...

  10. @Helper辅助方法和@functions自定义函数

    1.首先说下@helper辅助方法,当我们在多个视图中共用相同的方法的时候,可以把此方法剥离出来放到一个位置,此时就可以用到@Helper辅助方法,首先我们在解决方案右键添加 App_Code文件夹, ...