Fleschier

-

0%

前端学习——CSS

Posted on Edited on In
学习记录

不适合人类阅读的学习笔记

  • CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

  • 在CSS代码中不要随便加空格

  • CSS3动画效果

CSS代码语法

基础

注意各个语句之间以分号间隔

  • css 样式由选择符和声明组成，而声明又由属性和值组成，例如：p{color:blue}

  • 其中，p为 选择符，{..}为 声明，color为 属性，blue为 值。

  • 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

  • 声明：在英文大括号｛ ｝中的的就是声明，属性和值之间用英文冒号：分隔。当有多条声明时，中间可以英文分号；分隔，如：p{font-size:12px;color:red;}

  • 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号

  • 为了使用样式更加容易阅读，可以将每条代码写在一个新行内，所以上面的应该写为：

1
2
3
4
p{
  font-size:12px;
  color:red;
}

CSS中的注释

  • 格式：/*注释语句*/

三种CSS样式

  • 从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式，直接写在现有的HTML标签中

  • 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
1
<p style="color:red">这里文字是红色</p>

注意要写在元素的开始标签里

  • 并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
1
<p style="color:red;font-size:12px">这里文字是红色</p>

嵌入式css样式，写在当前的文件中

  • 嵌入式css样式，就是可以把css样式代码写在<style type="text/css"> </style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
1
2
3
4
5
<style type="text/css">
span{
color:red;
}
</style>
  • 嵌入式css样式必须写在<style> </style>之间，并且一般情况下嵌入式css样式写在<head> </head>之间

外部式css样式，写在单独的一个文件中

  • 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以.css为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
1
<link href="base.css" rel="stylesheet" type="text/css" />

  • css样式文件名称以有意义的英文字母命名，如 main.css。

  • rel="stylesheet" type="text/css" 是 固定写法 不可修改。

  • <link>标签位置一般写在<head>标签之内。

三种方法的优先级

  • 前提：在相同的权值的情况下。

  • 优先级：内联式 > 嵌入式 > 外部式

  • 总而言之，就是就近原则（离被设置元素越近优先级别越高）。

选择器

  • 每一条css样式声明（定义）由两部分组成，形式如下：
1
2
3
选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

  • 例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
body{
    font-size:12px;
    color:red;
}
</style>
</head>
<body>
<p>
XXXXXXXX
</p>
</body>
</html>

其中body{..}就是一个选择器（标签选择器），他作用于<body>部分

标签选择器

  • 标签选择器其实就是html代码中的标签。

  • 例：p{font-size:12px;line-height:1.6em;}这个就为p标签（<p>标签是段落部分）设置12px字号，行间距设置1.6em的样式。

类选择器

  • 语法：.类选器名称{css样式代码;}

  • 注意：以英文圆点开头。类选择器可以任意起名字。

  • 用法：

  1. 使用合适的标签把要修饰的内容标记起来，如：<span>胆小如鼠</span>

  2. 使用class="类选择器名称"为标签设置一个类，如：<span class="stress">胆小如鼠</span>

  3. 设置类选器css样式，如：.stress{color:red;} /*类前面要加入一个英文圆点*/

  • 类选择器使得我们可以灵活地自定义不同的部分的格式。

ID选择器

  • 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

  1. 为标签设置id="ID名称"，而不是class="类名称"。

  2. ID选择符的前面是井号（#），而不是英文圆点（.）

  • 例如：
1
2
3
4
5
#test{
  color:blue;
}
...
XXX<span id="test">...</span>

id选择器和类选择器的区别与联系

相同点

  • 可以应用于任何元素

不同点

  • ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

  • 这里只能使用一次是指同一个id选择器只能修饰一个地方，而类选择器可以同时修饰多个地方。当然我们可以定义多个id选择器来修饰不同的地方

  • 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

  • 正确示例：

1
2
3
4
5
6
7
8
9
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>
到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...
</p>

以上代码在<span>里定义两个类来修饰，这样的语法是可以的。上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

  • 错误的例子：
1
2
3
4
5
6
7
8
9
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>
到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...
</p>

以上代码是错误的，一个地方只能用一个id选择器来修饰。以上代码不能起到修饰的作用。

子选择器

  • 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

  • 例如：(以下代码会使class名为food下的子元素 li 加入红色实线边框。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
.food>li{border:1px solid red;}
...
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
...

包含(后代)选择器

  • 包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：.first span{color:red;}

  • 请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过>进行选择。

  • 总而言之就是，空格选择所有后代元素，>只选择第一代后代。

通用选择器

  • 通用选择器是功能最强大的选择器，它使用一个*号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}

伪类选择符

  • 它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}
    这句代码就实现了<a>(超链接)鼠标划过的特效，当鼠标划过超链接时，超链接的字体颜色会变成红色。

  • 一般:hover都是用来控制鼠标滑过的效果

  • 其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以一般用在a:hover的组合。(现在也可以用在其他的地方)

分组选择符

  • 当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码将<h1>、<span>标签同时设置字体颜色为红色：h1,span{color:red;}

  • 以上代码相当于下面两行代码：

1
2
h1{color:red;}
span{color:red;}

继承

  • CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。就是对某一些标签的样式的修改会对其子代也产生影响。

权值

  • 如果对同一个标签设置了不同的样式，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

  • 权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

  • 例如：

1
2
3
4
5
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

  • 使用!important来使样式获得最高权值：p{color:red!important;}

    注意：!important要写在分号的前面,中间不需要空格。

层叠

  • 如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？这时候我们就会用到层叠。

  • 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

  • 简单来说，就是，就是后面的样式会覆盖前面的样式。

  • 所以之前的内外优先级关系：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 也就很好理解了。

文字排版

字体

  • 例：为网页设置字体 body{font-family:"Microsoft Yahei";} //字体为微软雅黑

  • 注意：这里设置的字体能否显示，取决于用户本地有没有安装这个字体。

字号颜色

  • 设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：body{font-size:12px;color:#666}

  • font-size:字体大小

  • color：颜色(一般以#加数字来表示颜色，以增加颜色的多样化)

一些字体样式：粗体、斜体等

  • font-weight:字体粗细

  • 例：span{font-weight:bold;} //粗体

  • font-style:字体特点

  • 例：span{font-style:italic;} //斜体(意大利体)

  • text-decoration:文字修饰

  • 例：a{text-decoration:underline;} //下划线

  • 例：.oldPrice{text-decoration:line-through;} //删除线(将文字划去)

段落排版

首行缩进

  • 设置段落缩进两个字宽：p{text-indent:2em;}

  • 2em的意思就是文字的2倍大小。

行间距

  • 例：p{line-height:1.5em;}

中文字间距、字母间距

  • 如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现。

  • 例：h1{letter-spacing:10px;}

  • 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

  • 如果我想设置英文单词之间的间距，可以使用 word-spacing 来实现。

  • 例：h1{word-spacing:20px;}

对齐

  • 为块状元素中的文本、图片设置居中样式，可以使用text-align样式代码。

  • 例：h1{text-align:center/left/right;} //居中/左对齐/右对齐

元素分类

  • 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

  • 常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  • 常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  • 常用的内联块状元素有：<img>、<input>

块级元素

  • 设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点：a{display:block;}

  • 块级元素特点：

  1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。

  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

  3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素

  • 块状元素也可以通过代码display:inline将元素设置为内联元素。

  • 如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点：div{display:inline;}

  • 内联元素特点：

  1. 和其他元素都在一行上

  2. 元素的高度、宽度及顶部和底部边距不可设置

  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变

内联块状元素

  • 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

  • inline-block 元素特点：

  1. 和其他元素都在一行上

  2. 元素的高度、宽度、行高以及顶和底边距都可设置

颜色值

  • 英文命令颜色：p{color:red;}

  • RGB颜色：这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

  • 例：p{color:rgb(133,45,200);} 每一项的值可以是 0255 之间的整数，也可以是 0%100% 的百分数，例如：p{color:rgb(20%,33%,25%);}

  • 十六进制颜色：这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

  • 例：p{color:#00ffff;} //以#开头

长度值

  • 目前比较常用到px（像素）、em、% 百分比。(但是这三种单位都是相对值)

像素

  • 像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

em

  • 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：p{font-size:12px;text-indent:2em;}就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

百分比

  • p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

一些补充

元素宽度相关

  • calc()用法：详解

  • 如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。

opacity属性

  • 设置div元素的不透明级别

  • 语法：opacity: value|inherit;

  • 值： value: 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）; inherit: 应该从父元素继承 opacity 属性的值。

data-toggle属性

  • data-toggle一般是a元素(即链接)的属性。data-toggle指以什么事件触发。详细的介绍

-webkit-tap-highlight-color属性

  • -webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。

@media 用法

  • @media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局。(即根据不同大小的页面重新排版)

  • 语法：

1
2
3
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

  • 其中mediatype就是媒体类型，可以包括好多种，最常用的就是screen，其他多数已经作废。

  • media feature就定义了这个media设备的一些特征，简单的说就是媒体满足什么条件，常用的就是max-width，min-width。

  • 具体的例子

margin属性

  • 定义和用法：margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

  • 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

  • 例子 1：margin:10px 5px 15px 20px;
    上外边距是 10px;
    右外边距是 5px;
    下外边距是 15px;
    左外边距是 20px;

  • 例子 2: margin:10px 5px 15px;
    上外边距是 10px;
    右外边距和左外边距是 5px;
    下外边距是 15px;

  • 例子 3:margin:10px 5px;
    上外边距和下外边距是 10px;
    右外边距和左外边距是 5px;

  • 例子 4:margin:10px;
    所有 4 个外边距都是 10px

@media用法


> 最后更新与2018.7.9