CSS基础语法

本文用于介绍CSS相关的知识,用于记录自己的学习笔记。由于我已经熟悉了部分的HTML,所以相关的概念也不在这里进行描述了,直接写自己的一些心得感悟。

1.CSS规则

CSS是由两个主要的部分组成

  • 选择器
  • 一条或者多条的声明
    • 声明由属性和值组成

h1 {color:red; font-size:14px;}

1.1 值的不同写法

p {color: #ff0000;}
p {color:#f00}
p {color: rgb(255,0,0)}
p {color: rgb(100%,0%,0%)}

1.2 选择器的分组

选择器分组,可以让被分组的选择器有相同的声明。

h1,h2,h3,h4,h5{
color:green;
}

1.3 继承及其问题

2. 选择器

2.1 派生选择器

可以对某一个标记内的另外一个标记进行特殊格式设定

ls strong{
font-style:italic;
font-weight:normal;
}

2.2 id选择器

id选择器以#来定义,可以用来定义id等于特定值时显示不同的状态

#red {color:red;}
#green {color:green;}

id选择器作用效果为:

<p id="red">这个段落是红色</p>
<p id="green">这个段落是绿色</p>

id选择器可以和派生选择器结合,生成特定id下的特殊样式

#sidebar p{
font-style:italic;
text-align:right;
margin-top:0.5em;
}

2.3 CSS类选择器

类选择器同id选择器类似,可以针对特定的样式类来进行渲染

.center {text-align:center}

实际应用场景为

<h1 class="center">This heading will be center-aligned</h1>

2.4 属性选择器

2.4.1 单个的属性选择器

CSS定义

[title]
{ color:red }

HTML映射

<h2 title="Hello">Hello,World!</h2>

2.4.2 属性和值选择器

[title=W3CSchool]{
border:5px solid blue;
}

2.4.3 属性和值选择器-多个值

[title~=hello]{color:red;}

实际应用中,只要title带有hello字眼都可以实施渲染

<h2 title="world hello">Hello1 world</h2>

CSS常用标记

背景

p {background-color:gray;}
p {background-color:gray;padding:20px;}

背景图片

body {background-image:url(/i/eg_bg.gif);}

【Learn】CSS定义的更多相关文章

  1. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  2. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  3. (转)CSS定义字体间距 字体行与行间距

    源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS ...

  4. font-family:黑体;导致css定义全部不起作用

    css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了. 只要把font-family: "黑体"; 改成 font-fami ...

  5. Learn CSS

    韩顺平老师的CSS讲的还是很简单的,仅作入门. div+css的介绍    div+css是什么. div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素. css是 ...

  6. CSS定义选择器

    ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或 ...

  7. CSS定义网页滚动条

    (一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...

  8. 20, CSS 定义选择器

    1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...

  9. css定义好看的垂直滚动条

    滚动条的css样式主要有三部分组成: 1.::-webkit-scrollbar   定义了滚动条整体的样式:    2.::-webkit-scrollbar-thumb  滑块部分:     3. ...

随机推荐

  1. HttpHelper类及调用

    首先列出HttpHelper类 /// <summary> /// Http操作类 /// </summary> public class HttpHelper { priva ...

  2. 洛谷 P2900 [USACO08MAR]土地征用Land Acquisition 解题报告

    P2900 [USACO08MAR]土地征用Land Acquisition 题目描述 约翰准备扩大他的农场,眼前他正在考虑购买N块长方形的土地.如果约翰单买一块土 地,价格就是土地的面积.但他可以选 ...

  3. 解决win7 64位操作系统下安装PL/SQL后连接报错问题: make sure you have the 32 bits oracle client installed

    1. 在Oracle官网(http://www.oracle.com/technetwork/topics/winsoft-085727.html)下载文件: instantclient-basic- ...

  4. bzoj1907: 树的路径覆盖(树形DP)

    一眼题... f[i][0]表示在i连接一个子树的最小值,f[i][1]表示在i连接两个子树的最小值,随便转移... 样例挺强的1A了美滋滋... UPD:学习了2314的写法之后短了好多T T #i ...

  5. 解题:POI 2015 Pieczęć

    题面 发现好像没有什么好做法,那就模拟么=.= 以印章左上角的'x'为基准,记录印章上'x'的相对位置模拟.记录相对位置是因为可能有这种情况↓ 直接模拟是会漏掉的=.= #include<cst ...

  6. oracle、mysql、db2三大数据库分页方法的整理

    最近项目中经常会涉及到代码中支持三种数据库的分页的功能,自己整理了关于三种数据库的分页的写法,分享给大家,以供大家使用.希望能帮到更多的码友! 先来看一个代码片段: String page = ala ...

  7. jar包下载地址(fasterxml.jackson)

    jar包下载地址(fasterxml.jackson) Home » com.fasterxml.jackson » core jar包下载地址 https://mvnrepository.com/a ...

  8. Dell 戴尔预装Windows8改成Windows7

    UEFI模式启动: 添加启动方式,正确路径为: 另外: Ubuntu启动gpt由gpt10变为gpt9 dd

  9. Java面试题:多继承

    招聘和面试对开发经理来说是一个无尽头的工作,虽然有时你可以从HR这边获得一些帮助,但是最后还是得由你来拍板,或者就像另一篇文章"Java 面试题:写一个字符串的反转"所说: 面试开 ...

  10. jquery收集页面参数生成xml,用于与server做数据交互

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6382603.html 通过jquery ...