一.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. 矩池云上使用nohup和&让任务后台运行
			
    1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
    
			
    2. 
						
  2. 『德不孤』Pytest框架 — 13、Pytest中Fixture装饰器（三）
			
    目录 9.ids参数说明 10.name参数说明 11.scope参数说明 (1)scope="function" (2)scope="class" (3)sc ...
    
			
    3. 
						
  3. 学习Java集合
			
    1.列表  List接口(继承于Collection接口)及其实现类 List接口及其实现类是容量可变的列表,可按索引访问集合中的元素. 特点:集合中的元素有序.可重复: 列表在数据结构中分别表现为: ...
    
			
    4. 
						
  4. 原生JS添加事件方法
			
    事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => clic ...
    
			
    5. 
						
  5. Nebula Graph 在企查查的应用
			
    本文首发于 Nebula Graph Community 公众号 背景 企查查是企查查科技有限公司旗下的一款企业信用查询工具,旨在为用户提供快速查询企业工商信息.法院判决信息.关联企业信息.法律诉讼. ...
    
			
    6. 
						
  6. Golang 基础之基础语法梳理 (三)
			
    大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第三章节 Golang 基础之基础语法梳理 (一) Gol ...
    
			
    7. 
						
  7. 在Ubuntu 内安装spin
			
    相关课程:协议分析与设计 虽然一些镜像仓库内提供了spin,并且可以直接使用apt 或者yum 安装,但其版本总不是最新的,而且无法使用ispin 图形界面.因此本文介绍了手动下载编译spin 的步骤 ...
    
			
    8. 
						
  8. 前面顺序表的补充（复杂度，未实现的算法，空间扩展）（基于c语言）
			
    0.对于顺序表中的n个元素,如果在下标i的位置之前插入一个元素,则需要将后面n-i个元素向后移动一位:如果是删除下标为i处的元素,则是则需要将后面n-i-1个元素向前移动一位.如果说在i的位置插入和删 ...
    
			
    9. 
						
  9. Spring Boot 中初始化资源的几种方式
			
    假设有这么一个需求,要求在项目启动过程中,完成线程池的初始化,加密证书加载等功能,你会怎么做?如果没想好答案,请接着往下看.今天介绍几种在Spring Boot中进行资源初始化的方式,帮助大家解决和回 ...
    
			
    10. 
						
  10. ClickHouse镜像在阿里云镜像站首发上线
			
    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 ClickHouse是开源.高性能的列式OLAP的数据库管理系统(DBMS).使用SQL进行实时分析. ClickHouse可以做用户行为分析 ...
    
			
    11.