三.CSS基础

1.概述

层叠样式表Cascading Style Sheet，CSS，为网页添加样式。CSS不是标记语言，是样式表语言。可以选择性的给html文档的元素添加样式，如将html所有段落元素的文本改为红色。

p {
  color: red;  
}

（1）将上述代码命名为style.css保存在styles文件夹下。

（2）将css文件应用到html文档中，在index.html中将如下一行写到<head>中，

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

总体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My test page</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<h5>My image</h5>
<img src="images/google-icon.jpg" alt="My test imgage">
<p>A Mozilla,we're a global community of</p>
<ul>
    <li>tecknologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul>
<p>working together ...</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn more about them.</p>
</body>
</html>

（3）打开浏览器

paragraph为红色。

2.解析CSS规则集

整个结构是CSS的规则集：

（1）Selector选择器：要使用规则的html元素，这里是html的段落p，位于规则集的开始。选择一个或多个要添加样式的元素。

给多个元素加样式只要增加更改选择器即可。

（2）Declaration声明：指定要加的样式元素的属性。

（3）Properties属性：改变html元素样式的方法。color就是<p>元素的属性。CSS中可选择合适的属性来改变规则。

（4）Property Value属性值：多个值选一个。

其他语法：

（5）选择器外的规则集都在成对大括号中。

（6）每个声明，用冒号分开属性与属性值。

（7）用分号分隔不同声明。

如该多个属性

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

3.选择多个元素

多个元素添加相同样式，不同选择器逗号分隔，

p, li, h1 {
  color: red;
}

4.不同类型的选择器

已上是元素选择器（选择html文档的元素），选择器还有其他的来类型：

选择器名称	选择器内容	示例
元素选择器	指定的html元素	p 选择所有<p>
ID选择器	页面指定标识ID的元素，页面中每个标识ID只能被指定一个元素	#my-id 选择<p id="my-id">或 <a id="my-id">
类别选择器	页面指定类别的元素（多个类别）	.my-id 选择所有class <p class="my-class">和 <a class="my-class">
属性选择器	页面中指定属性的元素	img[src] 选择<img src=""myimage.jpg>元素，而没有属性的<img>元素不会被选择
伪类选择器	指定元素，但需要在特殊状态，如悬停	a:hover 选择<a>元素，但只有在鼠标悬停在链接上时

元素选择器是选择某一大类，class选择一小类，ID选择器可以具体选择某一个。

5.字体和文本

添加更多规则到style.css中，更加美观----》》字体和文本。

（1）Google Fonts，add一种字体，复制生成的code到index.html的<head>中，

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

（2）删掉style.css中的已有规则，红色字太丑！

（3）style.css添加code

html {
    font-size: 10px;   /* px代表像素，表示基础字号是10像素 */
    font-family: 'Charm', cursive;  /* Google Fonts上的输出 */
}

font-family是文本所用的字体。

以上规则为整体页面建立了一个全局字号（font-size）和字体（font-family），------->>因为<html>是整体页面的的父页面，所有子元素都会继承相同的font-size与font-family！

注：注释会被浏览器渲染时忽略。

（4）给HTML中body元素的<h1><h5><p><li>元素设置字号，且标题居中，内容设置行高与字符间距，提高可读性。

html {
    font-size: 10px;   /* px代表像素，表示基础字号是10像素 */
    font-family: 'Charm', cursive;  /* Google Fonts上的输出 */
}

h1 {
    font-size: 60px;
    text-align: center;
}

h5 {
    font-size: 20px;
    text-align: center;
}

p,li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
}

自由调整，使页面美观。

效果如下：command +：放大浏览器页面，command -：缩小

6.CSS设计一切与盒子有关！

（1）概述

CSS设计他们的尺寸，颜色，位置等！大部分html都可以看作一个个层叠的盒子。

CSS的布局基于盒模型，每个HTML页面的模块空间，都有以下属性：

内边距（padding）：围绕内容的空间；

边框（border）：紧接着内边框的实体线段；

外边距（margin）：围绕元素外部的空间。

如图：

涉及使用：

width；

background-color：元素内容与内边距之间的颜色；

color：元素内容的颜色，通常是文本；

text-shadow：为元素内的文本设置阴影；

display：设置元素显示模式。

（2）更改页面颜色

搜索：the Color Picker去自己选择颜色。下面语句设置整个页面背景颜色。

html {
  background-color: #83D5F5;
}

（3）解析body元素

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

width: 600px;　　强制页面永远保持600像素宽；

margin: 0 auto;　　在margin与padding属性中设置两个属性时，第一个代表元素的上下（这里为0），第二个代表左右（auto为特殊值，表水平方向左右对称）。也可1，3，4个值；

background-coler: #FF9500;　　元素背景色；

padding: 0 20px 20px 20px;　　内边距设置值使四周产生空间，一般不设置上方内边距，其他为20像素。四个值顺序为上，右，下，左----->>顺时针；

border: 5px solid black;　　页面四周5像素黑色边框；

（4）为页面主标题定位和添加样式

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

a.页面上方有个大间隙，因为浏览器提供给<h1>一个默认样式，为了给没设置css文件的情况提供默认值，设置

margin: 0;

去掉间隙。

b.上下内边距20像素

c.文本颜色与背景色一致

d.text-shadow给元素的文本元素添加阴影，四个值：

　　　·第一个像素值设置水平对齐：横向偏移，负值向左偏移；即引用与实体的水平偏移距离！越大越偏离

　　　·第二个像素设置竖直对齐：纵向偏移，负值向上；

　　　·第三个像素设置阴影的模糊半径：越大越模糊

　　　·第四个设置阴影的基色。

（5）居中图像

img {
  display: block;
  margin: 0 auto;
}

效果：

注意：图片过大会从body超出占用页面其他部分，可在index.html的<img>元素中加width属性设置图片宽带，如400px。

效果：

代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My test page</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Charm" rel="stylesheet">
</head>
<body>
<h1>Mozilla is cool</h1>
<h5>My image</h5>
<img src="images/google-icon.jpg" alt="My test imgage" width="400px">
<p>A Mozilla,we're a global community of</p>
<ul>
    <li>tecknologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul>
<p>working together ...</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn more about them.</p>
</body>
</html>

style.css

html {
    font-size: 10px;   /* px代表像素，表示基础字号是10像素 */
    font-family: 'Charm', cursive;  /* Google Fonts上的输出 */
    background-color: #83D5F5;
}

h1 {
    font-size: 60px;
    text-align: center;
    margin: 0;
    padding: 20px 0;
    color: #83D5F5;
    text-shadow: 30px 3px 10px black;
}

h5 {
    font-size: 20px;
    text-align: center;
}

p,li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
}

body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
}

img {
    display: block;
    margin: 0 auto;
}

posted @ 2018-12-21 17:34 rOtk1992 阅读(107) 评论(0) 收藏举报

刷新页面返回顶部

乂洛克

三.CSS基础

公告