CSS学习(1)CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。

CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。

元素主要有:颜色(color)、背景(background)、字体(font)、位置(position)、显示(display)、边框(border)、内边距(padding)、外边距(margin)、行高(line- height)、装饰(text-decoration)、过渡(transition)、变化(transform)、动画(animation).

使用css样式主要有三种方式

内联样式--你可以直接在 HTML 元素里使用style属性。

<h2 style="color: blue;">CatPhotoApp</h2>

内部样式--你可以在style标签里面声明样式规则。

<style>
h2 {
color: blue;
}
</style>
<h2>CatPhotoApp</h2>

外部样式--你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。

1.使用 class 选择器设置单个元素的样式

<style>

.red-text {
color:red;
}
</style>
<h2 class="red-text"> CatPhotoApp</h2>

注意: 在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将`red-text`class 选择器应用在第一个`p`元素上

<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">点击这里可以获取更多</p>
</main>

2.更改元素字体的大小

h1 {
  font-size: 30px;
}

3.通过`font-family`属性，可以设置元素里面的字体样式。

h2 {
  font-family: sans-serif;
}

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体

Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。我们需要引入Lobster字体。因此，需要将以下代码段，放到style标签之前:

<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster,sans-serif;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>

注意:所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体,如上面的代码当Lobster字体不可用时.会降级去使用sans-serif,有点类似于img元素里src的图片无法显示时,会用alt后面的代替显示.

4.CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似于字体的`px`（像素)值。

<style>\
  .larger-image {\
    width: 500px;\
  }\
</style>
<a href="#"><img class ="large-image" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg"
alt="一只仰卧着的萌猫"></a>

5.在元素周围添加边框

<style>
.smaller-image {
width: 100px;
}
.thick-green-border {
border-width: 10px;
border-style: solid;
border-color: green;
}
</style>
<a href="#"><img class="smaller-image thick-green-border" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>

Note:CSS 边框具有style，color和width属性。在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：

<img class="class1 class2">

图片边角很尖锐，我们可以使用border-radius属性来让它变得圆润。

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}

除像素外，你也可以使用百分比来指定border-radius的值。

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

6.`background-color`属性可以设置元素的背景颜色。

<style>
.green-background {
  background-color: green;
}
</style>

注意: 设置元素基本都是在

<style>这里面设置</style>

然后引用的话,使用class=”name1 name2“

7.设置元素的 id

除了class属性，每一个 HTML 元素也都有id属性。使用id有几个好处：你可以通过id选择器来改变单个元素的样式，在 JavaScript 里面，可以通过id来选择元素和操作元素。 id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>

8.使用 id 属性来设定元素的样式

#cat-photo-element {\
  background-color: green;
}

注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。

9.调整元素的内边距

padding控制着元素内容与border之间的空隙大小。 margin（外边距）控制元素的边框与其他元素之间的距离。

.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}

还可以给元素的每一侧添加不同的内边距

.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

同样CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。

如果不想每次都要分别声明`padding-top`，`padding-right`，`padding-bottom`和`padding-left`属性，可以把它们汇总在`padding`属性里面声明，

padding: 10px 20px 10px 20px;

这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。同理margin也是上右下左的顺序,顺时针的方向.

还有一种使用属性选择器来设置元素的样式

<style>
[type="checkbox"] {margin: 10px 15px 15px 10px}
</style>
<label><input type="checkbox" name="personality">懒惰</label>

10.理解绝对单位与相对单位

.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em 1.5em 1.5em 1.5em;
}

最近的几个挑战都是设置元素的内边距和外边距的px值。像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。

单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。

相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。

注意： 有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。

11.颜色设置

使用十六进制编码获得指定颜色

<style>
body {
background-color: #000000;
}
</style>

在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色，同时也是最小的值。通过三原色，我们可以创建 1600 万种不同颜色！0是十六进制里面最小的数字，表示着没有颜色。 F是十六进制里面最大的数字，表示着最高的亮度。

使用缩写的十六进制编码

<style>
.red-text {
color: #F00;
}
.green-text {
color: #0F0;
}
</style>

许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。

例如，红色的#FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。

这样，颜色的可能性减少到了大约 4000 种。且在浏览器里#FF0000和#F00完全是同一种颜色。

还有一种用的也不少,使用 RGB 值为元素上色

<style>
body {
background-color: rgb(0, 0, 0);
}
</style>

RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。

在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。

note:现在很多调色取色,通过软件,比如utools里的取色器可以获取对应颜色的RGB

CSS学习(1)