css入门

最新推荐文章于 2024-07-22 11:03:23 发布

机会留给准备的人

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量304

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u010713277/article/details/51045306

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

一、 CSS概述

1、CSS是什么？

* CSS 指层叠样式表

2、CSS有什么作用？

*CSS就是用来修饰HTML

3、CSS代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开

属性与属性值直接按用冒号连接

如果一个属性有多个值的话，那么多个值用空格隔开。例如： border:5px solid red;

注释：/* 注释内容*/

二、CSS选择器（重点）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <!-- style="font-size: 200px"   这是css -->
  <body>
    This is my HTML page.<font size="5" color="blue" style="font-size: 200px;">我是小明</font> <br>
  </body>
</html>

*CSS选择器：指定了CSS样式作用于哪个HTML标签上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<style type="text/css">
		font {
		    /* html */
			font-size: 10px;
			color: red;
		}
		
		p {
		
		}
	</style>
  </head>
 
  <body>
    This is my HTML page.<font>我是小明</font> <br>
  	<p>aaaa</p>
  </body>
</html>

1、基本选择器

l HTML标签选择器（优先级最低）

*就是把HTML标签名作为选择器名称

*格式：标签名 {}

l 类选择器

*样式格式： .class名{}

*标签格式： <p class=”class名”></p>

*能设置不同标签的相同样式

l Id选择器（优先级最高）

*样式格式： #id名{}

*标签格式：<p id=”id名”></p>

*有针对性地设置样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>css基本选择器.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		font {
		    /* html */
			font-size: 10px;
			color: red;
		}
		
		/*  html标签选择器 */
		p {
			font-size: 10px;
			color: blue;
		}
		
		/*  类选择器*/
		.xxxx {
			font-size: 10px;
			color: green;
		}
		
		/*  id选择器*/
		#ddd {
			font-size: 100px;
			color: blue;
		}}
		
		
	</style>
  </head>
  
  <body>
    <p>我是hadoop </p><br/>
    <h1 class="xxxx">ffffffff</h1>
    <h2 id="ddd">id</h2>
    <font>aaa</font><br/>
    <font>a</font><br/>
    <font>aa</font><br/>
    <font>aa</font><br/>
  </body>
</html>

2、扩展选择器

l 关系选择器

*两个或者多个选择器间存在关系

*格式：选择器1 选择器2 {}

*适用于标签嵌套

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		p {
		   
			font-size: 10px;
			color: red;
		}
		
		
		p font{
			color: blue;
		}
		
		
		
		
	</style>
	
  </head>
  <!-- style="font-size: 200px"   这是css -->
  <body>
  	<p class="haha">我是 <font >liangxiaoming</font></p>
  </body>
</html>

l 组合选择器

*格式：选择器1,选择器2{}

*适用于多个不同标签设置相同样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	/* 组合选择器*/
		p,font {
		   
			font-size: 10px;
			color: red;
		}
		
		
		
		
		
		
	</style>
  </head>
  <body>
  <p>aaaaaaaaa</p>
  <font>aaaaaaaaa</font>
  </body>
</html>

l 伪元素选择器

*HTML预定义的选择器

*格式：标签名:选择器{}

*选择器名称为 HTML标签的状态。例如：a:link{}表示链接标签在未访问过时的样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
	a:LINK {
	color: yellow;
}

a:VISITED {
	color: black;
}
</style>
  </head>
  <body>
  <a href="#">ddd</a>
  </body>
</html>

三、HTML与CSS的结合方式

*CSS必须结合HTML来用。

*4种使用方式：

A、style属性方式（内联样式）

*适合局部修改

*<font style="font-size:150px;color: red;">今天天气好晴朗</font>

B、style标签方式：（内嵌样式）

*<style></style> 存在于head标签之中的

*例如：<style type="text/css">

font {

font-size:150px;color: red;

}

</style>

*页面的多个标签统一设置。

C、导入方式（外部样式中使用较少）

*格式：@import url("CSS文件路径");

*存在于<style>标签中

D、链接方式（外部样式最常用的方式）

*格式：<link rel="stylesheet" type="text/css" href="CSS文件路径"/>

*存在于<head>标签中

外部样式好处：

提升了代码的复用性，更加易于维护，从而极大提高工作效率

样式优先级：

内联样式》》内嵌样式》》外部样式（就近原则）

链接方式和导入方式区别：

1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载，在网速较慢时会出现网页没有样式的情况。（导入方式硬伤）

2、链接方式支持JavaScript修改样式，而导入方式不支持（导入方式硬伤）

3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS

4、链接方式导入的CSS任何浏览器都OK，而导入方式要求浏览器版本必须在IE5以上

建议使用链接方式

四、CSS布局（了解）

l 盒子模型（了解会用）

在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。

边框（border）分为上下左右。用于设置盒子边框

内边距（padding）分为上下左右。用于设置元素在盒子内的位置。

外边距（margin）分为上下左右。用于设置盒子的位置

l 漂浮属性（简单了解）

float

l 定位属性（简单了解）

position

机会留给准备的人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css入门

CSS一、 CSS概述1、CSS是什么？ * CSS 指层叠样式表2、CSS有什么作用？*CSS就是用来修饰HTML3、CSS代码规范选择器名称 { 属性名：属性值；属性名：属性值；…….}属性与属性之间用分号隔开属性与属性值直接按用冒号连接如果一个属性有多个值的话，那么多个值用空格隔开。例如： border:5px solid red;注
复制链接

扫一扫