2017.11.3笔记

最新推荐文章于 2018-05-22 22:56:29 发布

酱紫呐

最新推荐文章于 2018-05-22 22:56:29 发布

阅读量138

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_40888248/article/details/78448891

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

CSS的基础使用

一、CSS简介

CSS 指层叠样式表(Cascading Style Sheets)，定义如何显示HTML元素。

二、CSS样式规则和CSS加载的方式

CSS样式规则： 选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性：property 希望设置的样式属性：style attribute

CSS加载的方式：

1.引入外部文件

HTML文档中使用<link>元素引入外部样式文件，引入外部样式文件应在<head>元素中增加
<link>子元素。

<link href="outer.css" rel="stylesheet" type="text/css"></link>

2.导入外部样式单

导入外部样式表单需要在<style>元素中执行@import进行导入。

<style type="text/css">
@import "../outer.css";
@import url('outer.css');
</style>

3.使用内部CSS样式

<style type="text/css">
样式单文件定义
</style>

一般不建议使用内部CSS样式：1.复用性小。2.导致HTML文档过大，会导致网络负载严重。3.修改整站风格时，需要对每个网页文件进行样式修改。

4.使用内联CSS样式

内联样式只对单个标签有效，不会影响整个文件。
在HTML元素中使用style属性定义内联样式。

<div style="property1:value1;property2:value2;"/>

三、DIV和SPAN标签简介

HTML元素分为两大类：区块元素和内联元素。
内联元素和区块元素
区块元素：
总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是可控制的。
高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上。
实例: <h1>, <p>, <ul>, <table>。
内联元素：
内联元素和其他的元素显示在一行上。
上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。
实例: <b>, <td>, <a>, <img>。
<div>元素：
HTML <div>元素是区块元素，它可用于组合其他HTML元素的容器。
<div>元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示换行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<span>元素：
HTML <span>元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

四、选择器

1.通配符选择器

使用"*"表示通配符，用来选择页面所有元素的样式。

*{ margin:0;
padding:0;}

2.类选择器

类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任
意。

.myclass{...}

3.ID选择器

ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。（id在HTML文档中具有唯一性，是不可以重复的）

#idValue{ ...}

4.包含选择器

包涵选择器用于指定处于某个选择器对应的内部元素。

h1 em {color:red;}

5.子选择器

子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

parent>child{width: 200px; height: 35px;}

6.群组选择器

群组选择器使用逗号对选择符进行分隔。

h1,p,myClass,#main{
font-size:20px;
}

五、伪类

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如“ :hover” 将在用户悬停在选择器指定的元素上时应用样式。

1.anchor伪类

链接的不同状态都可以以不同的方式显示。
注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于
a:hover之后，才是有效的。伪类的名称不区分大小写。

2.first-child伪类

:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。

3.first-line伪类

"first-line" 伪元素用于向文本的首行设置特殊样式。
注意："first-line" 伪元素只能用于块级元素。
下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

4.:before伪类

":before" 伪元素可以在元素的内容前面插入新内容。

六、CSS颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。
CSS的颜色可以通过以下等方法指定：十六进制颜色、RGB颜色、RGBA颜色、颜色名等值指定。

1. 十六进制颜色值

所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和
BB（蓝色）。所有值必须介于0和FF之间。

p
{
background-color:#ff0000;
}

2.RGB颜色值

RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

p
{
background-color:rgb(255,0,0);
}

3.RGBA颜色值

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

p
{
background-color:rgba(255,0,0,0.5);
}

七、背景图片

1.背景颜色

background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

2.背景图片

background-image 属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

background:url(img_flwr.gif);

3.背景平铺重复设置

background-repeat属性控制背景图像的平铺重复效果。

4.背景图片固定

在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把backgrounattachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移
动。

body{background-attachment: fixed;}

5.背景图片的定位
可以利用 background-position 属性改变图像在背景中的位置。
6.背景图片大小
background-size属性指定背景图片大小。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

7.背景的简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position

八、文本

1.文本的颜色

颜色属性被用来设置文字的颜色。

2.文本的水平对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐。

3.文本修饰

text-decoration属性一般用于删除链接的下划线。

4.文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

5.文本缩进

text-indent属性控制首行文本的缩进。
属性值可以是固定值（包括负数），也可是百分比。

6.字符间距和字间距

letter-spacing属性控制字符的间距。属性值可以是正负数。
word-spacing属性控制字间距。

7.行间距

line-height属性控制行间距（简称行高）。

8.元素的垂直对齐方式

vertical-align属性控制元素垂直对齐方式。
vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。

九、CSS列表

1.使用不同的列表项标记

使用list-style-type改变列表项标记。

2.使用图片作为列表项

使用list-style-image可以用图片作为列表的标记项。

DIV+CSS布局

一、盒子模型内外边距和边框介绍

1.边框

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式，还有颜色。

2.外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。用 margin 属性或者 padding属性分别设置外边距和内边距的宽度。
如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。
如果你指定两个宽度，第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度：上、右、下、左。