CSS基础学习

最新推荐文章于 2022-02-06 14:57:47 发布

楚狂

最新推荐文章于 2022-02-06 14:57:47 发布

阅读量564

点赞数

分类专栏： CSS Web

本文链接：https://blog.csdn.net/zw11208781/article/details/72717197

版权

Web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

CSS基础

1. 简介:

从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

简单来说:

HTML称之为页面的结构,CSS称之为页面的表现

JAVA课程：http://www.mukedaba.com/forum-39-1.html

1.1. 体验css

大家还记得在编写Html 时, 设置表格的边框,宽度,位置等需要通过table 标签的属性进行设置.

如果一个页面中还有其他的表格(table) 我们需要在每一个表格中都添加大量的属性用于控制表格的内容的表现. 这样就会导致代码的冗余.不易维护,我们可以通过Css 来解决该问题.

案例: 一个普通的table 表格,使用css 进行修饰.

<head>

<title>New Web Project</title>

</head>

<style type="text/css">

table{

border: 1px;

border-color: black;

border-style: solid;

margin: auto;

width: 50%;

height: 50%;

border-collapse: collapse;

}

td{

border: 1px;

border-color: black;

border-style: solid;

font-size:15px;

color:blue;

font-family:Courier new;

text-align: center;

padding: 5px;

}

</style>

<body>

<table>

<caption>这是一个普通表格</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

该html使用了css

Css代码如下

style type="text/css">

table{

border: 1px;

border-color: black;

border-style: solid;

margin: auto;

width: 50%;

height: 50%;

border-collapse: collapse;

}

td{

border: 1px;

border-color: black;

border-style: solid;

font-size:15px;

color:blue;

font-family:Courier new;

text-align: center;

padding: 5px;

}

</style>

显示效果如下:

小结:

HTML 的用户控制页面的结构,CSS 用于控制页面内容的表示.实现了页面结构和内容表现的分离.

2. 使用css

2.1. 使用css改变字体的大小和颜色

实现页面的如下效果:

2.2. 分析与实现

我们可以简单的写出栏目一和栏目五,但是这些栏目的字体,字体大小,字体颜色.如何定义.可以使用html的<font属性>,例如:

栏目一

但是查看文档,发现font标签的属性,都不赞成使用.

这里其实是涉及到页面的显示效果,我们应该使用css .

如何使用css?

我们可以使用HTML的 标签。我们可以将需要显示的信息装入该标签中,中有一个style属性, 该属性可以添加css的属性(例如字体大小,颜色等等)

效果

2.3. 在标签中使用CSS

问题一:怎么用css

我们知道css可以将网页变得漂亮,我们想要通过css 调整字体的大小和颜色, 查看文档,找到css 的属性(很多), 其中有字体(font).发现了font-size 属性和color属性.

在标签span中的属性style 可以添加css属性

例如:

栏目一

代码:

<html>

<head>

</head>

<body>

栏目一

栏目二

栏目三

栏目四

栏目五

</body>

</html>

总结:

在此html文件中,在span标签中我们使用了css样式.

css的基本语法

<元素名 style =”属性名:属性值;属性名:属性值;”>

其中的元素可以是html的任意标签.

属性名: 属性值 ,这里就需要参考css文档了.

现在需要统一这个页面的风格,我们可以一个一个的去修改每个span标签中的style,但是操作麻烦,可以有更好的解决方案.

我们可以新建css文件.将网站的风格统一放在该文件中.

2.4. 使用CSS文件统一页面显示

统一网站的风格.

需要将整个页面的文字字体类型,大小,颜色都统一.了解了css之后就非常清楚css可以轻松完成这个任务. 你可以使用多种方式来定义css完成任务.

注意: 本例是使用link 引入了css文件.

Css文件(注意:以.css后缀名结尾)

span {

font-size: 20px;

color: #00B271;

}

Html代码(蓝色部分代码,是将css文件引入到html文件中,否则css效果无法作用与该页面)

<html >

<head>

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

</head>

<body>

栏目一

栏目二

栏目三

栏目四

栏目五

</body>

</html>

总结:该例子中如何将css文件应用到html文件中? 关键的是将css文件引入到了html文件中

这其实是CSS文件的引入.

3. CSS引入方式

3.1. style属性[行内样式]

在单独制定一个标签的时候使用

例如:可以设置字体颜色,字体,字体大小

如果果多个标签都使用相同的样式, 那么代码冗余

格式:

Hello World

但是如果出现了新的内容页需要同样的相同大小的字体.就需要每个都定义.麻烦

<html>

<head>

</head>

<body>

hello,world

</body>

</html>

例如: 每个段落都需要相同的显示效果.需要重复定义,

<body>

hello,world

All time is no time when it is past.

Don't spend time beating on a wall, hoping to transform it into a door.

In this world, only those men who really feel happy can give women happiness.

</body>

效果如下:

每个p中都定义了一个style 都是重复的.如何减少重复代码?

总结:

使用每个HTML元素的style属性指定样式，每个样式之间使用";"隔开

格式： <h2 style="color:#3F0; border:dotted">AAAAAAA</h2>

优点：可以单独对每个元素使用不同的样式

缺点：如果有很多页面的元素的样式是一致的，不能提高代码的复用性

3.2. 使用<style>标签[内部样式]

在页面中如果有多个标签样式相同时使用.你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。

格式如下(注意阅读蓝色加粗部分代码):

<head>

<title>New Web Project</title>

<style type="text/css">

</style>

</head>

案例实现:

<head>

<title>New Web Project</title>

<style type="text/css">

p {

color: yellow;

font-size: 20px;

font-family: cursive;

width: 230px;

height: 160px;

border: 1px;

border-style: solid;

border-color: black;

}

</style>

</head>

<body>

All time is no time when it is past.

Do the thing you fear, and the death of fear is certain.

Don't spend time beating on a wall, hoping to transform it into a door.

</body>

效果:

请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

如果,网站有多个页面,页面的字体也要统一,岂不是每个页面都要写一次,重复性工作!!!

总结:

在页面的<head>标签中使用<style>标签引入样式

格式： <style>h2{ color:#00F;} </style>

特点：该引入方式可以写在页面的任何位置，但是推荐放在<head></head>

优点：可以对当前页面的所有的元素进行统一的修饰

缺点：如果不同的页面样式是相同的，该引入方式不同提高代码的复用性

3.3. 使用<link>标签[外部样式]

如果多个页面中都需要导入相同的css, 可以使用这种形式.

推荐使用.

注意: 这里使用了标签选择器

<head>

</head>

<body>

All time is no time when it is past.

Do the thing you fear, and the death of fear is certain.

Don't spend time beating on a wall, hoping to transform it into a door.

</body>

css文件

p {

color: yellow;

font-size: 20px;

font-family: cursive;

width: 230px;

height: 160px;

}

效果:

总结:

属性：

rel: 标识当前页面文件和引入文件的关系如果值为stylesheet则代表是修饰与被修饰的关系

href：引入外部资源的路径

type: 引入外部资源的类型如果值为text/css则代表引入的文件是一个纯文本的样式文件

优点：代码的复用性好

缺点：引入的是文件，所以效率比较低，对于一些追求页面速度的网页不适合使用如：搜索网页

4. CSS的选择器

CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

参数说明：

selector --选择器

property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

body {color: blue}

上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

css中有多种不同的选择器

类选择器(又叫class类选择器) .

Id选择器 #

Html元素(标签)选择器

通配符选择器 *

简单的说，选择器就是在css中创建，而在网页页面中使用。

4.1. 标签选择器(html选择器)

4.1.1. 需求

实现如下效果.就是所有的字体颜色都变为黄色.

可以所以用标签选择器

格式:

Html标签名{

属性名:属性值;

}

优点：使用简单直观

缺点：会使得页面的所有该标签都被修饰

4.1.2. 实现

Css 代码:

/*类选择器*/

.myCss {

color: white;

font-size: 25px;

font-family: "宋体";

background-color: #B45B3E;

}

/*id选择器*/

#import {

color: blue;

font-size: 30px;

font-family: "楷体";

}

/*标签选择器*/

body {

color: yellow;

}

Html代码:

<body>

欢迎阅读本新闻

新闻一

新闻二

新闻三

新闻四

新闻五

新闻六

<!--

重大新闻:朝韩开战啦!!!</spn>

-->

重大新闻:朝韩开战啦!!!

</body>

效果:

4.2. 类选择器

类选择器名{

属性名:属性值;

…

}

使用时需要使用class

4.2.1. 需求

实现该效果

字体粗体,设置字体大小,设置字体背景

分析:需要通过css设置字体,字体大小,字体背景颜色. 这里可以使用类选择器:

格式如下:

4.2.2. 实现

Css文件:

.style1 {

font-size: 30px;

font-family: 宋体;

background-color: pink;

}

Html代码. 在head中引入css 并在每个<span标签中使用了css样式>

注意引用类选择器通过:class

例如：

新闻1

<html>

<head>

</head>

<body>

新闻1

新闻2

新闻3

新闻4

新闻5

</body>

</html>

总结:

优点：可以对指定的元素进行修饰

缺点：如果修饰相同，就要指定class属性

注意: class属性的值不能以数字开头

4.3. Id选择器：

4.3.1. 需求：

这是一则非常重要的新闻，的字体和颜色和其他明显不一样。需要单独显示。

我们可以直接：在这段话上定义css

<html>

<head>

</head>

<body>

新闻1

新闻2

新闻3

新闻4

新闻5

这是一则重要的新闻

</body>

</html>

也可以使用ID选择器：

ID选择器格式：

#id选择器名称{

属性名:属性值;

}

在html文件中如果要引用id选择器，则<元素 id=’id选择器的名称’></元素>

优点：可以对很特殊的元素进行单独的修饰

缺点：每次只能用一次，这样会导致页面的上HTML元素有过多的id属性(id滥用)

细节： id的属性值必须唯一

4.3.2. 实现

Css代码:

/*类选择器*/

.style1 {

font-size: 30px;

font-family: 宋体;

background-color: pink;

}

/*id选择器*/

#style2 {

font-size: 36;

font-family: 楷体;

background-color: #B3B3B3;

}

Html代码:

使用ID选择时注意:

这是一则重要的新闻 要通过id

<html>

<head>

</head>

<body>

新闻1

新闻2

新闻3

新闻4

新闻5

这是一则重要的新闻

</body>

</html>

4.4. 选择器优先级

为什么在标签选择其中添加了颜色,有的标签的内容的颜色并没有改变?这里是因为选择器的优先级.因为标签使用了多种选择器.

测试: 一个元素同时使用id选择器,类选择器,标签选择器修饰.并且修饰的有重复内容(例如字体颜色)

实现:

<html>

<head>

</head>

<body>

欢迎来到广州传智播客!

新闻1

新闻2

新闻3

新闻4

新闻5

这是一则重要的新闻

测试选择器优先级

</body>

</html>

当一个元素同时被id选择器类选择器 html选择器修饰，则优先级是：

Id选择器>类选择器>html选择器

4.5. CSS属性值

!important

<style>

color:#F00 !important;}

color:#0F0;}

</style>

4.6. 包含(交集)选择器:

需求: 强调非常重要4个

想要强调非常重要4个字,如何处理可以使用id选择器,类选择器.

<html>

<head>

</head>

<body>

欢迎来到广州传智播客

新闻一

新闻二

新闻三

新闻四

新闻五

这是一则<span

style="font-style: italic; color: red">非常重要的新闻.

</body>

</html>

这里比较适合使用父子选择器

代码实现:

/*父子选择器*/

#style1 span{

font-style: italic;

color: red;

}

<html>

<head>

</head>

<body>

欢迎来到广州传智播客

新闻一

新闻二

新闻三

新闻四

新闻五

这是一则非常重要的新闻.

</body>

</html>

注意: 使用父子选择器标签是html 可以识别的标签.

类选择器和id选择器都可以有父子选择器.

父子选择器可以有多级.

父子选择器适用于id选择器和class选择器

效果:

突出重字.

#style1 span span{

font-style: italic;

color: white;

font-size: 20;

}

这是一则非常重要的新闻.

Html文件中使用多个class选择器.

注意: 当在html中同时使用多个class选择器时,使用空格隔开. 当class选择器定义冲突时(例如都有字体颜色)那么在css文件中,最后出现的class选择器样式为准.(css文件的先后顺序)

类选择器在css文件中的位置.

/*类选择器*/

.style2 {

background: red;

font-size: 30;

font-family: 宋体;

color: black;

}

/*类选择器*/

.style3 {

color: white;

}

同时使用多个类选择器,.使用空格隔开

使用多个类选择器

4.7. 并集选择器

使用元素名和元素名来查找要修饰的元素，元素名和元素名之间使用,隔开

格式： h2,h3{ color : red; } <h2></h2> <h3></h3>

4.8. 伪类选择器:

案例:

我们希望所有的超链接

默认样式是黑色，24px，没有下划线

当鼠标移动到超链接时，自动出现下划线

点击后，超链接变成红色。这又该怎么实现呢

查看css文档.我们可以使用伪类.我们想要设置的是超链接.找到伪类中的:link 文档清楚的告诉我们link表示设置 a 对象在未被访问前的样式.查看实例正是我们想要的功能.

有发现了有相关的hover 等伪类.

<html>

<head>

/*伪类选择器*/

a:link {

color: black;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

a:visited {

color: red;

}

</style>

</head>

<body>

<a href="#">hello,world</a>

</body>

</html>

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00}/* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

4.9. 顺序选择器

p:first-child {font-weight: bold;}

li:first-child {text-transform:uppercase;}

4.10. 通用选择器

*{ }

5. CSS属性

CSS 背景

CSS 文本

CSS 字体

CSS 列表

CSS 表格

CSS边框

以上样式表的属性信息参考W3C API文档

6. 盒子模型

<a>

padding

border

margin

7. DIV块元素

div 标签是用来为HTML文档内大块内容提供结构和背景的元素.div 可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的实现效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

简单理解:div+css

div 是存放内容(文字,图片,元素)的容器.

Css是用于指定存放在div中的内容如何显示的样式。

行内元素

• span

块元素

• div

块元素和行内元素的转换

• display

布局

• table

• div

体验:网站变灰

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>网站灰色代码-深切哀悼青海玉树地震遇难同胞</title>

<style>

html {

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);

}

</style>

</head>

<body>

3月8日8时26分，中新社电：马来西亚航空公司表示，一架载有239人的飞机失去联系。

北京时间凌晨2点40分与管制中心失去联系，经纬度为北纬06°55′15″ 东经103°34′43″，但该地点未搜到飞机残骸。

</body>

</html>

楚狂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习

CSS基础1. 简介:从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单来说:HTML称之为页面的结构,CSS称之为页面的
复制链接

扫一扫