关于CSS的一些基础内容

最近用到了CSS,刚好学学。CSS(Cascading Style Sheet)中文名层叠样式表,用于为html文档添加样式控制,也是一种计算机语言。

一、CSS语法
a)CSS规则由选择器和声明组成,构造为selector{declaration1;declaration2},多个声明之间用分号隔开。declaration又包含属性property和值value两部分。结构为property:value。

b) 不同的property的value有不太能够的写法,比如color:#ff000;color:rgb(255,255,255);width:12px;width:98%;font-family:"Calibr"等等。
c) CSS中使用空格不会影响工作效果,而且CSS对大小写不敏感,但涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

d) 可以对选择器分组,然后使用相同的声明,比如
table,div,h1{
  color:red;
}

二、选择器
常用的选择器有派生选择器、ID选择器、类选择器、属性选择器等。
a) 派生选择器
能够依据元素的上下文关系来定义样式,所以也叫上下文选择器。比如要让li列表中的strong元素变为斜体字:

li strong {
    font-style: italic;
    font-weight: normal;
  }
 
<ol>
<li><strong>我是斜体字</strong></li>
<li>我是正常的字体。</li>
</ol>

让h2中的strong颜色为blue

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

h2 strong会覆盖h2的样式定义

b)ID选择器
用于为标有特定ID的html元素指定样式。

#red {color:red;}
<p id="red">这个段落是红色。</p>

ID属性在html中不能重复,否则只有最后渲染的那个生效。

ID选择器也用于建立派生选择器,扩展派生选择器的使用场合。

c) 类选择器
用点号开头,且类名的第一个元素不能是数字,基本使用为:
.center {text-align: center}
<h1 class="center">
类选择器可作用于所有标记的元素。
类选择器也可以可派生选择器配合使用:
.fancy td {
    color: orange;
    }
这样写时,类名为fancy的更大的元素内部的表格单元都会显示橙色文字。
td.fancy {
    color: orange;
    }
而这样时,所有类名为fancy的单元格都将是橙色文字。
d)属性选择器
用于对带有指定属性的HTML元素设置样式。比如为带有title属性的所有元素设置样式:

<h2 title="Hello world">Hello world</h2>
<a title="hello" href="http://hello.com">hello</a>

[title]
{
color:red;
}

还有属性和值选择器,比如
[title=hello]选择title=hello的元素
[title~=hello]选择title包含hello的元素
[title|=hello]选择title以hello开头的元素

e)伪类
伪类用于为选择器添加特殊的效果,比如要控制超链接的状态:
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */

伪类与CSS还可以配合使用:

a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">css</a>

三、框模型(Box Model)
a)CSS中的元素采用框模型来定义内容(element)、内边距(padding)、外边距(margin)、边框(border)等。

b) padding属性控制元素边框与内容之间的空白区域,margin则设置元素边框外侧的空白区域。
如果直接写padding:10px或margin:10px,则四条边框都会生效,也可以使用*-top\*-right\*-bottom\*-left来分别设置,简写时为{padding\margin:1px,1px,1px,1px},这是按照上右下左的顺时针顺序设置了对应的边距。

c)CSS的长度单位分为相对长度单位和绝对长度单位,相对长度单位有em(字体高度)\ex(字体x的高度)\px(像素)\%(百分比),绝对长度单位有in(英寸)\cm\mm\pt(point1点=72分之1英寸)\pc(Picas,1px=12点)。为边距使用%时,是相对父元素的width计算的。

时间: 2024-08-04 23:33:27

关于CSS的一些基础内容的相关文章

CSS 的一些基础内容

## CSS cursor 属性 cursor 属性规定要显示的光标的类型(形状). 实例 一些不同的光标: -  - span.crosshair {cursor:crosshair;} - span.help {cursor:help;} - span.wait {cursor:wait;}  ## CSS visibility 属性 visibility 属性规定元素是否可见. 实例 使 h2 元素不可见: -  - h1.visible {visibility:visible} - h1

css基础内容

css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 一.css的引入方式 1.直接在html标签元素内嵌入css样式 <div style="font-size:14px; color:#FF0000;">行内引入</div&g

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

(1) css的核心基础

 css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg: 身高:172CM: } 这个表实际是由3个要素组成的,即姓名.属性.属性值.通过这样一张表,就可以把一个人的基本情况描述出来了.表中每一行分别描述了一个人的某一种属性,以及该属性的属性值. css的规则:三级标题{                             用英文写出来:h3{ 

3天学习完AngularJS基础内容小结

简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src=&q

CSS标签内多余内容隐藏

CSS: 1 <style> 2 .mazey{width:100px;} 3 .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 4 </style> HTML: 1 <div class="mazey nowrap">http://www.mazey.net/baby/blog/#http://www.mazey.net/baby/blog/#http://www

用CSS让未知高度内容垂直方向居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; tex

HtmlParser学习之一:基础内容

1.相关资料 官方文档:http://htmlparser.sourceforge.net/samples.html API:http://htmlparser.sourceforge.net/javadoc/index.html 其它HTML 解释器:jsoup等.由于HtmlParser自2006年以后就再没更新,目前很多人推荐使用jsoup代替它. 2.使用HtmlPaser的关键步骤 (1)通过Parser类创建一个解释器 (2)通过Filter或者Vistor访问Html中的内容. 3

Objective-c学习笔记—— 基础内容

6.5.1 多重继承 Python也支持多种继承形式.一个能继承多个基类的类定义如下: class DerivedClassName(Base1, Base2, Base3): <statement-1> . . . <statement-N> 大多数情况,最简单而言,你可以把从父类继承下来的属性查询看成是遵循深度优先,从左到右. 而不是在同一等级重复的同样类中执行两次.因此,如果一个属性没在派生类中找到,首先会在base1然后再base1的基类中,如果在那里都没发现,就会在bas