css入门基础详细教程

1首先在 webroot文件夹下新建一个css文件

可以命名为style.css。效果图如下:

2 jsp引用css文件

<head>

<title>显示</title>

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

</head>

3 css文件的格式

Css规则主要由选择器和声明组成。声明由属性和值组成。一条规则可以有多个声明。当然选择器也可以有多个中间用逗号隔开

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

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

h1,h2,h3,h4,h5,h6{

color: green;

}

为了看起来简洁明了,一个声明占一行

属性和值之间用“冒号:”隔开

记得一条声明完了后得有一个分号“;”

选择器和声明之间用“空格”隔开

声明我们用花括号“{}”包住

如果值不知道取多少合适,可以直接网上搜索

4 css选择器介绍

4.1CSS 元素选择器

         又被称为类型选择器,是html的某个元素,比如p,a,h1.甚至可以是html本身。

h1{font-family: sans-serif;}

4.2css选择器分组

将多个元素组合在一起

h1,h2, h3, h4, h5, h6 {color:blue;}

4.3类选择器

在html文件中

<h1class="important">

Thisheading is very important.

</h1>

<pclass="important">

Thisparagraph is very important.

</p>

在css文件中

如果只希望对h1元素做改变

h1.important{color:blue;}

如果希望所有相同类都做改变

*.important {color:red;}

当然,也可以省略星号“*”

但是一定要注意类前面的那个点“.”

4.4 ID选择器

在html文件中

<pid="intro">This is a paragraph of introduction.</p>

在css文件中

#intro{font-weight:bold;}

首先在html文件中制定一个id名,然后在css文件中,在id名加一个井号“#”

  4.5属性选择器

适用于某个元素的属性,比如a元素的属性 href

a[href]{color:red;}

这样就会使得链接的字体变红

4.6后代选择器(包含选择器)

后代选择器可以选中作为某元素后代的元素

在html文件中

<h1>Thisis a <em>important</em> heading</h1>

<p>Thisis a <em>important</em> paragraph.</p>

在css文件中

h1em {color:red;}

这样的效果是,只有上面的important变成红色

4.7伪类

例如在html中

<body>

<p>sometext</p>

<p>sometext</p>

</body>

在css中

p:first-child{

color: red;

}

效果是只有第一个 “some text”变为红色

4.8伪元素

在html文件中

<body>

<p>

Youcan use the :first-letter pseudo-element to add a special effect to the firstletter of a text!

</p>

</body>

在css文件中

p:first-letter

{

color:#ff0000;

font-size:xx-large

}

这样首字母“Y”会变为红色,变大。

最后给大家提建议,w3shcool对于网站开发初学者有比较大的入门培训

时间: 2024-11-12 20:37:42

css入门基础详细教程的相关文章

CSS入门基础学习二

我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) background-repeat(设置背景平铺)  repeat (默认值) no-repeat (不平铺) repeat-x  (横向平铺) repeat-y (纵向平铺) background-position (设置背景位置) 设置具体值: left| right| top| bottom| cnete

学起来 —— CSS 入门基础

Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化,三 为代码书写规范性.其中要求的第一条"两个分离"指的是内容与表现分离以及内容与行为分离,而其中的"表现"指的就是CSS.CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言,可以给HTML带来更多更精

SpringBoot入门最详细教程

https://www.jianshu.com/p/af3d5800f763 网上有很多springboot的入门教程,自己也因为项目要使用springboot,所以利用业余时间自学了下springboot和springcloud,使用下来发现springboot还是挺简单的,体现了极简的编程风格,大部分通用都是通过注解就可以完成,下面就来详细讲解下如何使用springboot来开发一个简单的restful api网关功能,可以提供给H5或者android.ios进行接口开发,还是很方便的. 1

利用python 数据分析入门,详细教程,教小白快速入门

这是一篇的数据的分析的典型案列,本人也是经历一次从无到有的过程,倍感珍惜,所以将其详细的记录下来,用来帮助后来者快速入门! 数据的格式如下: 我们设定 一个trem or  typedef为一条标签,一行为一条记录或者是键值对,以此为标准! 下面我们来对数据进行分析: 数据集中一共包含两种标签[trem] and [typedef]两种标签,每个标签下边有多个键值对,和唯一的标识符id,每行记录以"/n"结尾,且每条标签下下有多个相同的键值对,for examble: is_a,syn

css学习基础详细(常用)

css简介 层叠样式表,可以修饰html 可以单独拿出来,直接做成css文件 通过单个样式表控制多个文档的布局 更为精确的布局控制 为不同的媒体类型(屏幕,打印等)采取不同的布局 无数高级,先进的技巧 可以活动更换网页风格 行内,内部,外部样式表 用html设置设置背景 <backgroupcolor="" > 用css设置 body{backgroup-color=""} 写行内扩展性不好,写行内也不好 单独拿出来,写成css文件 <html&g

node.js零基础详细教程(5):express 、 路由

第五章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑.编写接口,最后完成一个完整的项目后台,预计共10天课程. express Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. 其实可以简单的将express理解为node.js的一个类库:我们在使用j

nodejs零基础详细教程1:安装+基础概念

第一章 建议学习时间2小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑.编写接口,最后完成一个完整的项目后台,预计共10天课程. 每日更新,建议跟学,按照本教程学习一定可以学好Nodejs,中途发现教程有误的地方,请及时留言反馈 node.js安装 通过官网下载 node.js 中文网下载地址 http://nodejs.cn/download/ windows系统我们

node.js零基础详细教程(7):node.js操作mongodb,及操作方法的封装

第七章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑.编写接口,最后完成一个完整的项目后台,预计共10天课程. node.js操作mangodb 创建一个用于放置今天文件的文件夹,npm init初始化一下,并创建demo1.js用于写node代码 使用 npm install mongodb,将mongodb控制模块安装到本地 在demo1.js中写

node.js零基础详细教程(6):mongodb数据库操作

第六章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑.编写接口,最后完成一个完整的项目后台,预计共10天课程. 数据库 数据库管理结构,一般分为两种:B/S架构   C/S架构. B/S架构:  Browser/Server,浏览器/服务器模式,即通过浏览器和服务器端的数据库进行交互 C/S架构:  Client/Server,客户端/服务器模式,即通