CSS入门

CSS核心基础


CSS样式规则


选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}



CSS代码结构中的特点

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。



多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。



如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。



在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。

在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。



属性和属性值之间不允许出现空格，否则浏览器会报错

引入CSS样式表


优先级：

   如果三种样式同时控制我们的内容：行内优先级最高

   外部样式，内部样式：谁离着内容近，谁优先级高



1、行内式

行内式也称为内联样式，是通过标记的style属性来设置元素的样式

<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>



style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

2、内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义

<style>标记定义，其基本语法格式如下：

<head>

<style type="text/css">

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>



<style>标记一般位于<head>标记中<title>标记之后，也可以把他放在HTML文档的任何地方。





3、链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中

<head>

<link href="CSS文件的路径" type="text/css" rel="stylesheet" />

</head>



<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三个属性

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。





4、导入式

导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记内的开头处使用@import语句，即可导入外部样式表文件

<style type="text/css" >

@import url(css文件路径);或 @import "css文件路径";

/* 在此还可以存放其他CSS样式*/

</style> 

style标记内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。

CSS基础选择器


概述

要想将CSS样式应用于特定的HTML元素，首先需要找到目标元素

在CSS中执行这一任务的样式规则部分被称为选择器

1、标记(元素)选择器

标签名｛

｝

是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如:p{ font-size:12px; color:#666; font-family:"微软雅黑";}



最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。





2、类选择器

前提：标签内有class

.class值｛

｝

类选择器使用“.”（英文点号）进行标识，后面紧跟class类名

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

最大的优势是可以为元素对象定义单独或相同的样式

3、 id选择器

#id值｛

｝

使用“#”进行标识，后面紧跟id名

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }



id选择器和类选择器的值不能以数字开头；用字母开头   a12   12a(不行)



id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。





4、通配符选择器

用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }



使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距

* {

margin: 0;                    /* 定义外边距*/

padding: 0;                  /* 定义内边距*/

}



属性选择器

标签名[标签属性='值'] {

}

概述

在标签后面使用中括号标记

是对“元素选择器”的扩展，对一组标签进一步过滤



语法格式

标签名[标签属性='标签属性值']{属性名：属性值；……}



包含选择器

外层标签 内层标签｛

｝

概述

两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写

语法格式

父标签 后代标签{属性名:属性值;……}

CSS文本样式


CSS字体样式属性


1、font-size:字号大小

用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位

相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少

em 相对于当前对象内文本的字体尺寸

px 像素，最常用，推荐使用

绝对长度单位 说明

in 英寸

cm 厘米

mm 毫米

pt 点

2、font-family:字体

用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等

将网页中所有段落文本的字体设置为微软雅黑

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个

例如:body{font-family:"华文彩云","宋体","黑体";}

注意

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3、font-weight:字体粗细

用于定义字体的粗细，其可用属性值：normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)、100~900（100的整数倍）【400等同于normal，700等同于bold】

4、font-variant:变体

用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效

其可用属性值：

normal：默认值，浏览器会显示标准的字体。

small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

5、font-style:字体风格

用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。





6、font:综合设置字体样式

选择器{font: font-style  font-variant  font-weight  font-size/line-height  font-family;}

必须按上面语法格式中的顺序书写，各个属性以空格隔开。





其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

例如：

p{ font-family:Arial,"宋体"; font-size:30px; font-style:italic; font-weight:bold; 

font-variant:small-caps; line-height:40px;}

等价于

p{ font:italic small-caps bold 30px/40px Arial,"宋体" ;}

CSS文本外观属性


1、color:文本颜色

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

2、letter-spacing:字间距

所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

3、word-spacing:单词间距

用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

4、line-height:行间距

用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

5、text-transform:文本转换

用于控制英文字符的大小写，其可用属性值：

none：不转换（默认值）。

capitalize：首字母大写。

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

6、text-decoration:文本装饰

用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。





7、text-align:水平对齐方式

用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐





例如：h2{ text-align:center;}

8、text-indent:首行缩进

用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。





9、white-space:空白符处理

其属性值如下：

normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

pre：预格式化，按文档的书写格式保留空格、空行原样显示。

nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

CSS高级特性


CSS复合选择器


复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1、标签指定式选择器

又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。





2、后代选择器

用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。





3、并集选择器

是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

层叠性


是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

继承性


是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。



不具有继承性：边框、外边距、内边距、背景、定位、布局、元素宽高属性。

CSS优先级


定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

p{ color:red;}              /*标记样式*/

.blue{ color:green;}       /*class样式*/

#header{ color:blue;}      /*id样式*/

对应的HTML结构为：

<p id="header" class="blue">

帮帮我，我到底显示什么颜色？

</p>

标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。因此文本显示为蓝色

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

strong{ color:red;}

#header{ color:green;}

对应的HTML结构为：

<p id="header" class="blue">

<strong>继承样式不如自己定义</strong>

</p>





虽然#header具有权重100，但被strong继承时权重为0，而strong选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。



行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 



权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

HTML&CSS精选笔记_CSS入门的更多相关文章

  1. HTML&CSS精选笔记_HTML入门

    HTML入门 什么是HTML HTML基本文档格式 HTML文档的基本格式,其中主要包括<!DOCTYPE>文档类型声明.<html>根标记.<head>头部标记. ...

  2. HTML&CSS精选笔记_CSS高级技巧

    CSS高级技巧 CSS精灵技术 需求分析 CSS精灵是一种处理网页背景图像的方式.它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发 ...

  3. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  4. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

  5. HTML&CSS精选笔记_浮动与定位

    浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属 ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. HTML&CSS精选笔记_列表与超链接

    列表与超链接 列表标记 无序列表ul 无序列表的各个列表项之间没有顺序级别之分,是并列的 <ul> <li>列表项1</li> <li>列表项2< ...

  8. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  9. Java精选笔记_Java入门

    Java概述 什么是Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言 JavaSE标准版 是为开发普通桌面和商务应用程序提供的解决方案 JavaEE企业版 是为开发企业级应用程序提供的解 ...

随机推荐

  1. Python 2.7.9 Demo - 020.函数的定义、返回

    #coding=utf-8 #!/usr/bin/python def setConfig(): hello = 'world'; print 'The value has been setted.' ...

  2. Oracle PLSQL Demo - 16.弱类型REF游标[没有指定查询类型，已指定返回类型]

    declare Type ref_cur_variable IS REF cursor; cur_variable ref_cur_variable; rec_emp scott.emp%RowTyp ...

  3. 将ip地址转换成C段地址的UDF

    将ip地址转换成C段地址的UDF,最重要的是判断IP地址的正则表达式. package cn.cnnic.ops.Study; import java.util.regex.Pattern; impo ...

  4. HTML DOM addEventListener() 方法

    实例 为 <button> 元素添加点击事件. 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World&quo ...

  5. 十倍交叉验证 10-fold cross-validation

          10-fold cross-validation,用来测试算法准确性.是常用的测试方法.将数据集分成十份,轮流将其中9份作为训练数据,1份作为测试数据,进行试验.每次试验都会得出相应的正确 ...

  6. 编程精粹--编写高质量C语言代码（1）：假想编译程序

    编译程序只能查找出程序的语法错误,而对于"数组越界訪问","对空指针解引用"等错误.编译程序是束手无策的.同一时候我们知道測试人员所使用的黑箱測试方法所能做的不 ...

  7. 起来吧！不要做奴隶的ITproject师们！

    本文转自林忠信的博客:  http://davylin.blog.163.com/blog/static/8138791201441465328380/ 起来吧! 不要做奴隶的ITproject师们! ...

  8. 在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

    前些时间在做一个搜索功能时发现一个比較有意思的现象,场景是这种:在一个模态窗体中是一个订单列表.页面的顶部有若干个状态筛选框和一个搜索keyword输入框,当焦点在keyword输入框时按回车,本来是 ...

  9. C＃创建资源文件

    资源文件顾名思义就是存放资源的文件.资源文件在程序设计中有着自身独特的优势,他独立于源程序,这样资源文件就可以被多个程序使用.同时在程序设计的时候,有时出于安全或者其他方面因素的考虑,把重要东西存放在 ...

  10. C语言 · 前10名

    算法提高 前10名   时间限制:1.0s   内存限制:256.0MB      问题描述 数据很多,但我们经常只取前几名,比如奥运只取前3名.现在我们有n个数据,请按从大到小的顺序,输出前10个名 ...