一.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. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手
			
    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示  ...
    
			
    2. 
						
  2. SQL从零到迅速精通【表连接查询】
			
    看了这些表连接,个人感觉'左外连接'.'右外连接'和'全外连接'应用好就可以了. 1.外连接 (1)LEFT JOIN(左连接):返回包括左表中的所有记录和右表中连接字段相等的记录. 在student ...
    
			
    3. 
						
  3. laravel 数据验证规则
			
    return [ 'accepted' => '必须为yes,on,1,true', 'active_url' => '是否是一个合法的url,基于PHP的checkdnsrr函数,因此也 ...
    
			
    4. 
						
  4. 1、mysql数据库的数据目录结构
			
    查看mysql的主要目录结构 通过命名查看mysql的目录结构:find / -name mysql 1.1数据库文件的存放路径 MySQL数据库文件的存放路径:/var/lib/mysql/ 1.2 ...
    
			
    5. 
						
  5. 七天接手react项目 系列
			
    七天接手react项目 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 r ...
    
			
    6. 
						
  6. request的自动urlencode问题解决
			
    今天写盲注脚本的时候,由于题目对空格进行了过滤,所以必须要用%09进行代替,然而当我在脚本中,将payload的空格替换成%09的时候,抓包发现进行了两次编码,导致脚本一直跑不通. 自己在网上也没有找 ...
    
			
    7. 
						
  7. Java基础 - 注解详解
			
    What - 什么是注解?        Annontation是Java5开始引入的新特征,中文名称叫注解.它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metadata)与程序元素( ...
    
			
    8. 
						
  8. buu equation wp
			
    知识点考察:jsfuck解码.js逆向.z3处理大量数据 源码分析 源码 根据提示猜测有jsfuck Jsfuck编码共六个字符分别为[.].+.!.(.) 观察上述不难发现l['jsfuck']=' ...
    
			
    9. 
						
  9. 半吊子菜鸟学Web开发4 --Html css学习2
			
    1<a>标签,链接到另一个页面 <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> H ...
    
			
    10. 
						
  10. JSBridge通信原理, 有哪几种实现的方式？
			
    JsBridge给JavaScript提供了调用Native功能,Native也能够操控JavaScript.这样前端部分就可以方便使用地理位置.摄像头以及登录支付等Native能力啦.JSBridg ...
    
			
    11.