一.css样式表

1.样式表分类
1.内联式

<p >This is an apple</p>

2.内嵌样式表

作为一个独立的区域 内嵌在网页里面，必须写在head标签里面

<style type="text/css>

p{text-decoration:underline}

</style>

3.外部样式表

新建一个CSS文件，然后在HTML文件中调用此样式表。在HTML文件中邮件——CSS样式——附加样式表。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>优先级比较</title>

<link href="red.css" type="text/css" rel="stylesheet">//链接式-外部样式

<style type="text/css">

    p{//内嵌样式表

        color: blue;

        font-size: 20px;

    }

    @import url(yellow.css);//导入式

</style>

</head>

<body>

<p >行内样式 &gt;链接式&gt;内嵌式&gt;导入式(链接式在后面)<br/>//行内样式---内联式

行内样式 &gt;内嵌式&gt;导入式&gt;链接式(链接式在前面)<br/>

总的规律：后面的样式会覆盖前面的样式

</p>

</body>

</html>

二.选择器
1.标签选择器
用标签名直接做选择器

<style type="text/css">

p

{

font-size=14px;

}

</style>

直接作用下面的p标签

<p>GOd is a girl</p>

2.class选择器

class选择器都是以“.”为开头

<head>

<style type="text/css">

.main {

height=24px;

width=18px;

text-align:center;

}

</style>

</head>

<body>

<div class="main"> 调用的class样式。

Day by day

</div>

</body>

3.ID选择器

id选择器都是以"#"开头的

<head>

<style type="text/css">

#main{

width=15px;

}

</style>

</head>

<body>

<div id="main"> 调用的id样式

ones more

</div>

</body>

4.复合选择器

1.用","逗号隔开表示并列

<style type="text/css">

p,span{

width=100px;

height=50px;

}

</style>

2.用空格隔开表示后代

<style type="text/css>

.main p{ /*找到使用main的标签，然后再其下好到p标签，则p标签使用此样式*/



样式 




</style>


 




 


 3.筛选".(英文的点)"




<style type="text/css">

p.sp /*在P标签中的class="sp" 应用该样式*/

{

样式

}

</style>




样式和属性


    1.背景和前景
	 background-color 背景颜色
	 background-image：url 背景图片
	 background-attachment-fixed 背景图是固定的
	 background-attachment-scroll 背景随字体滚动
	 background-attachment:no-repeat 背景不平铺  /* no-repeat 不平铺  repeat 平铺  repeat-x 横向平铺   repeat-y 纵向平铺
	 background-position:center 居中显示  /* 背景图居中，设置背景图位置时，repeat必须为 no-repeat
	 background-position:right top;  图片放到右上角
	 background-position:left 100px;top 200px;  背景图离左边100像素，离上边200像素（恶意设为负值）。
	
	2.字体
	 font-family  字体
	 font-size：12px;  字体大小12像素
	 font-weight：bold   字体加粗  正常是normal
	 font-style:italic 字体倾斜 正常是normal




												


											
CCS基础样式表的更多相关文章
	

    
								
  1. 3、CCS样式表
		
    一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...
    
		
    2. 
						
  2. WEB入门三	CSS样式表基础
		
    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...
    
		
    3. 
						
  3. QT 样式表基础知识
		
    1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 ...
    
		
    4. 
						
  4. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
		
    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
    
		
    5. 
						
  5. CSS样式表基础
		
    CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...
    
		
    6. 
						
  6. css样式表分类、选择器分类、css基础样式
		
    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...
    
		
    7. 
						
  7. HTML基础（五）——-css样式表——样式属性——格式与布局
		
    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:a ...
    
		
    8. 
						
  8. HTML基础（三）——css样式表
		
    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
    
		
    9. 
						
  9. 一起学HTML基础-CSS样式表常用样式属性
		
    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 我的hacker标杆
			
    前言:我为什么用"标杆"而不是用偶像来做题目呢?因为在我的心中,值得我学习的黑客绝不是仅仅值得成为我个人的偶像,更应该成为业界的标杆. 国外篇: 丹尼斯·里奇 评价:克尼汉评价道: ...
    
			
    2. 
						
  2. Jmeter计数器实现自增功能
			
    如果需要引用的数据量较大,且要求不能重复或者需要自增,那么可以使用计数器来实现 如:新增功能,要求名称不能重复 1,新增计数器 计数器:允许用户创建一个在线程组之内都可以被引用的计数器. 计数器允许用 ...
    
			
    3. 
						
  3. 在 Debian 和 Ubuntu 上安装 Cutefish 可爱鱼
			
    版权声明:原创文章,未经博主允许不得转载 CutefishOS 是一个可爱好看的新 Linux 发行版,当前最新版本为 0.8beta .这是一个基于 Debian 的发行版,从其镜像源配置就可以明显 ...
    
			
    4. 
						
  4. 使用PostgreSQL 脚本导出数据库的DDL
			
    使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...
    
			
    5. 
						
  5. pd.merge操作的on参数解释
			
    # 同时传入两个Key,此时会进行以['key1','key2']列表的形式进行对应,left的keys列表是:[['K0', 'K0'],['K0', 'K1'],['K1', 'K0'],['K2 ...
    
			
    6. 
						
  6. sqlmap + DVWA 入门
			
    sqlmap 入门 前言 项目地址: sqlmap: https://github.com/sqlmapproject/sqlmap DVWA: https://github.com/ethicalh ...
    
			
    7. 
						
  7. web note
			
    web note html note 列表 ul 无序列表 ol 有序列表 并且可以通过 type 来定义列表序号的形式 <!DOCTYPE html> <html> < ...
    
			
    8. 
						
  8. 前端知识之css样式
			
    前端之CSS样式 css介绍 css是为html标签设置样式的 css由选择器和声明组成 声明包括属性和属性值 声明之间用分号:隔开 css注释 /注释类容/ css的几种引入方式 行内样式 不推荐使 ...
    
			
    9. 
						
  9. JDBC操作数据库的步骤 ？
			
    注册数据库驱动. 建立数据库连接. 创建一个Statement. 执行SQL语句. 处理结果集. 关闭数据库连接.
    
			
    10. 
						
  10. Jakarta Java Mail属性参数配置
			
    前言 Jakarta Mail网址:https://eclipse-ee4j.github.io/mail SMTP协议可匹配的属性:https://eclipse-ee4j.github.io/ma ...
    
			
    11.