当前位置：文档之家 › java就业班CSS基础

java就业班CSS基础

  • 格式：doc
  • 大小：816.50 KB
  • 文档页数：24

CSS基础

1. 简介:

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

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

简单来说:

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

1.1. 体验css

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

cellspacing="0px" bordercolor="green">

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

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

New Web Project

这是一个普通表格

1,11,21,3

2,12,22,3

该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;

}

显示效果如下:

小结:

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

2. 使用css

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

实现页面的如下效果:

2.2. 分析与实现

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

栏目一

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

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

如何使用css?

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

效果

2.3. 在标签中使用CSS

问题一:怎么用css

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

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

例如:

栏目一

代码:

栏目一

栏目二

栏目三

栏目四

栏目五

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

css的基本语法

其中的元素可以是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效果无法作用与该页面)

栏目一

栏目二

栏目三

栏目四

栏目五

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

这其实是CSS文件的引入.

3. CSS引入方式

3.1. style属性[行内样式]

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

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

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

格式:

Hello World

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

hello,world

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

hello,world

合集下载

css知识点总结

css知识点总结

css知识点总结

CSS知识点总结。

一、CSS简介。

1. 定义。

- CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML等标记语言）文档外观和布局的样式语言。它可以控制网页元素的样式，如颜色、字体、大小、间距、布局等。

2. 作用。

- 将内容（HTML）与表现（CSS）分离。这使得网页的维护和更新更加容易，例如，如果要改变整个网站的字体颜色，只需要修改CSS文件中的相关样式规则，而不需要逐个修改HTML页面中的每个元素。

二、CSS的基本语法。

1. 选择器（Selector）

- 元素选择器。

- 直接使用HTML元素名称作为选择器，例如`p`选择所有的`

`段落元素，`h1`选择所有的`

- 类选择器。

- 以`.`开头，后面跟着自定义的类名。例如`.my - class`可以选择所有带有`class = "my - class"`属性的元素。在HTML中可以这样使用：`

- ID选择器。 - 以`#`开头，后面跟着自定义的ID名。ID在一个HTML页面中应该是唯一的。例如`#my - id`可以选择带有`id = "my - id"`属性的元素，如`

2. 声明块（Declaration Block）

- 由一个或多个声明（Declaration）组成，每个声明包含一个属性（Property）和一个值（Value），中间用`:`分隔，声明之间用`;`分隔。例如：

p {

color: red;

font - size: 16px;

}

- 在这个例子中，`p`是选择器，`{}`内部是声明块。`color: red`和`font -

size: 16px`是两个声明，其中`color`和`font - size`是属性，`red`和`16px`是值。

三、CSS的引入方式。

1. 内联样式（Inline Style）

- 直接在HTML元素的`style`属性中定义CSS样式。例如：`

CSS必备基础知识点

CSS必备基础知识点

CSS必备基础知识点

浏览器内核

firefox:gecko

ie:trident

safari:webkit

chrome: webkit ---> 基于webkit开发了Blink

opera:Presto ---> webkit ---> Blink

css样式表的组成

样式表：

规则集：选择器(浏览器从右向左读) 声明块组成

声明块：声明组成

声明：合法的css属性的键值对(属性 属性值)组成

引入样式的三种方式

引入CSS样式有三种方式，分别是：行内样式、内部样式、外部样式。

行内样式(优先级最高)

xxx

charset='UTF-8'> 行内样式 demo

Lorem ipsum dolor sit

amet.

内部样式

将样式写在标签中，用style标签将样式包裹起来。

行内元素转换为块元素

在CSS样式中将display的值设置为block;

外部样式

在标签中写，href的值需要单独建一个扩展名为.css的样式文件,注意路径。

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

CSS的基本使用方式

在编码时，我们利用选择器来为各个元素设置样式。基本的选择器分别为：标签选择器、类(class)选择器、id选择器。

选择器语法

d83bd18e-07b5-46fc-9fac-222ae086a4f3.png

标签选择器

标签名{样式}

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Magni

id选择器

xxx

#id名{样式}

Lorem, ipsum dolor sit amet

consectetur adipisicing elit.

后代选择器

祖先元素选择器 后代选择器

Lorem, ipsum dolor sit amet consectetur

【黑马程序员济南】前端与移动开发就业班笔记CSS进阶：Day01

【黑马程序员济南】前端与移动开发就业班笔记CSS进阶：Day01

黑马程序员济南中心 编著 【黑马程序员济南】 前端与移动开发就业班笔记CSS进阶:Day01

京东网站前期准备工作

1.1 项目背景

 现在电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站总结，复习，提高前面所学布局技术。

1.2 设计目标

保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。

熟悉CSS+DIV布局，页面的搭建工作

了解常用电商类网站的布局模式

为后期京东移动端做铺垫

 黑马程序员济南中心 编著 1.3 设计思考几点

(1). 开发工具 webstorm 、fireworks（ps）、各种浏览器.

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

(2). CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)

normalize.css

保护有用的浏览器默认样式而不是完全去掉它们

一般化的样式：为大部分HTML元素提供

修复浏览器自身的bug并保证各浏览器的一致性

优化CSS可用性：用一些小技巧

解释代码：用注释和详细的文档来

(3).

低版本浏览器

单独制作一个跳转页面

https:///dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

黑马程序员济南中心 编著 1.4 目录说明

要实现结构和样式相分离的设计思想。 根目录下有这4个文件。

[td]

名称 说明

css css文件夹 CSS

images 图片文件夹

index 京东首页 HTML

CSS 基础教程

CSS 基础教程

CSS 基础语法

 CSS 简介

 CSS 高级语法

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的

HTML

元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

值的不同写法和单位 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

p { color:

#ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

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

p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用px单位，因为 0 就是 0，无论单位是什么。

记得写引号

提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

多重声明：

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：