第2天:css 快速入门

css是什么

  css(cascading style sheet,可以译为“层叠样式表”),是一组格式设置规则,用于控制web页面的外观

如何让一个标签具有样式

  第一步:必须保证引入方式正确

  第二步:必须让css和html元素产生关联,也就是说要先找到这个元素

  第三步:用相应的css属性去修改html元素样式

css的三种引入形式

  1、将css内嵌到HTML文件中,这种方式又叫内联样式表,例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

  2、将一个外部样式链接到HTML文件中,这种方式又叫链接样式表,例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

  3、将样式表加入到HTML文件中,这种方式又叫做行内样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<body>
		<div style="width: 200px;height: 200px;background: green;"></div>
	</body>
</html>

  

基础选择器

  id选择器:id选择器在css中只出现一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		#box{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div id="box"></div>
	</body>
</html>

  类选择器:将相同类型的元素进行分类定义,分类定义的好处就是能够复用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		.box{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

  标签选择器:直接使用HTML标签名称作为css选择器的名称,这种方式会影响HTML中所有此标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页</title>
	</head>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div ></div>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/sellsa/p/9014923.html

时间: 2024-10-08 03:43:46

第2天:css 快速入门的相关文章

Html与CSS快速入门01-基础概念

Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. Html(Hypertext Markup Language超文本标记语言):1990由Tim Berners-Lee爵士设计,成为了Internet上标准的文本传输形式,可以这么说,对于在互联网行业工作的我们来说,这就是我们饭碗的基础啊,嘿嘿. 基本文档格式,请见如下示例: 1 <!DOCTYP

web前端之css快速入门

css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2

CSS快速入门-前端布局1(抽屉)

一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整体布局(header.body.footer) 抽屉的首页主要分为三块:头部.网页内容.底部内容. 2.header实现 header由logo.内容菜单.登录菜单.搜索框四部分组成. 代码架构为: body{ margin:0px; background-color:#ededed; } ul{

CSS快速入门-前端布局2(唯品会1)

上一篇我模仿了抽屉网站,这一节我来对唯品会主页进行模仿. 我觉得写一个主页大概思路如下: 1.确定整体布局方式:(html) 2.针对每一块进行细化,尽量做到模块化.(css) 3.加上特效效果.(js) 先看效果图: 原文地址:https://www.cnblogs.com/skyflask/p/9022520.html

css快速入门-引入方式

一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 <p style="background-color:red">行内式</p> 2.内联式 在head标签内使用 <html> <head> <style> div { background-color:red; } div p {

第二篇 CSS快速入门

学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签--CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,功能是用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1. 行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <!DOCTYPE html> <html lang

前端基础之CSS快速入门

前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式来美化一下前面的组件,让我们的页面更美观. 在开始css这部分之前,我们需要先在此着重提一下div这个标签,div标签在网页的标准化布局上起到了决定性的因素,我们通过使用div+css,可以完美的让我们的每个组件去到它自己应该去的地方. <div></div> 我们在学习css样式前,

html+css快速入门教程(2)

3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容器</div> 3.2 span span:可以表示一个小区块,比如一些文字,span和div的不同就是 span能够在一行内显示 而 div独占一行 <span>一周热门排行榜</span> 3.3 h1-h6 h1 到 h6 这6个标签表示 6级标题,表现出来的效果就是

CSS快速入门-组合选择器

<div class="gradefather"> hello1 <div class="father">hello2 <p class="son">hello4</p> </div> <p>hello3</p> <p>hello5</p> </div> 一.A,B :任意选择器 A or B div,p { #所有div或者p