一.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. 手绘流程图，教你WSL2与Docker容器无缝互相迁移
			
    摘要:本文主要介绍WSL2与Docker容器无缝迁移镜像. 本文分享自华为云社区<WSL2与Docker容器,无缝互相迁移>,作者: tsjsdbd . 注:本文提到的WSL都是指WSL2 ...
    
			
    2. 
						
  2. Solon 1.6.33 发布，更现代感的应用开发框架
			
    相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
    
			
    3. 
						
  3. emu8086实现两位数加法运算
			
    题目说明:给出一个公式,例如 "35 + 28 = ",输出计算结果 一.准备材料 DOS功能调用表:https://blog.csdn.net/mybelief321/artic ...
    
			
    4. 
						
  4. 使用Python 模拟RSA 加密与解密
			
    一.关于 RSA具体原理请移步其他文章,本文主要使用Python 来模拟RSA 算法的实现过程 二.简要分析 在RSA算法中,存在以下几个参数: 1.大素数p.q 2.n = p *q 3.Phi_n ...
    
			
    5. 
						
  5. 如何用 Redis 解决海量重复提交问题
			
    前言 在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同.按照这个含义,最终的含义就是 对数据库的影响只能是一次性的, ...
    
			
    6. 
						
  6. 5月28日 python学习总结  CSS学习（二）
			
    CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...
    
			
    7. 
						
  7. WebGPU 计算管线、计算着色器（通用计算）入门案例：2D 物理模拟
			
    目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Paral ...
    
			
    8. 
						
  8. Python GUI tkinter 学习笔记（二）
			
    第二个程序 # -*- coding: utf-8 -*- from Tkinter import * class App: def __init__(self, master): # frame 创 ...
    
			
    9. 
						
  9. Python_Learn,Python背景的介绍
			
    一.计算机程序的运行方式 机器语言编写的程序可以在计算机上直接运行,而汇编语言和高级余语言写的程序(通常称为源程序)则需要"翻译"成机器语言才能运行.源程序"翻译&quo ...
    
			
    10. 
						
  10. J20航模遥控器开源项目系列教程（四）PCB打印 | 嘉立创PCB下单教程，5元顺丰包邮解君愁！
			
    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/J ...
    
			
    11.