一.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. 使用 MobaXterm 连接矩池云 GPU服务器
			
    Host Name(主机名):hz.matpool.com 或 hz-t2.matpool.com,请以您 SSH 中给定的域名为准. Port(端口号):矩池云租用记录里 SSH 链接里冒号后的几位 ...
    
			
    2. 
						
  2. 使用 yapi-to-typescript 生成接口响应数据的 TS 类型声明
			
    TS 是越写越爽,但是很不爽的是接口响应数据一堆,每次要去手写很麻烦. 最近正好后端接口文档从一个垃圾工具切换到了 Yapi,然后去搜了下可以通过接口文档自动生成 TS 类型声明,就自己搞了下,还是很 ...
    
			
    3. 
						
  3. Python安装包报错：PackagesNotFoundError: The following packages are not available from current channels
			
    以安装SimpleITK包为例,安装时,显示下图错误 conda install SimpleITK 按以下操作完成包安装 anaconda search -t conda SimpleITK #查询 ...
    
			
    4. 
						
  4. Linux网卡ifcfg-eth0配置详解
			
    DEVICE="eth1"                              网卡名称 NM_CONTROLLED="yes"            n ...
    
			
    5. 
						
  5. CF1117G题解
			
    题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...
    
			
    6. 
						
  6. vue/cli项目添加外部js文件的一个方法
			
    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
    
			
    7. 
						
  7. Java Object 类常用方法总结
			
    总结 public final native Class<?> getClass() //返回此 Object 运行时的类 public native int hashCode() //返 ...
    
			
    8. 
						
  8. Golang 语言特性
			
    1. 函数 与c 语言不同,go 语言中,函数的参数和返回值都由栈来存储. 传值:函数调用时会复制参数,被调用方和调用方持有两份不相关的两份数据 传引用:函数调用时会传递参数指针,被调用方和调用方持有 ...
    
			
    9. 
						
  9. linux下oracle数据库的启动
			
    linux下oracle数据库的启动 一.切换oracle用户 命令:su - oracle 二.运行sqlplus命令,进入sqlplus环境 命令:sqlplus /nolog (nolog参数表 ...
    
			
    10. 
						
  10. 分布式 PostgreSQL 集群(Citus)，官方快速入门教程
			
    多租户应用程序 在本教程中,我们将使用示例广告分析数据集来演示如何使用 Citus 来支持您的多租户应用程序. 注意 本教程假设您已经安装并运行了 Citus. 如果您没有运行 Citus,则可以使用 ...
    
			
    11.