第四章 初始CSS

一.引入样式

	1.行内样式表
		<h1 style="color: red;font-size: 18px;">10-30</h1>

	2.内部样式表(在head标签里面,title标签下面)
		<style type="text/css">
			h2{
				color: yellow;
				font-size: 20px;
			}
		</style>
		优点
			方便在同页面中修改样式
		缺点
			不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

	3.外部样式表
		嵌入式
			<link href="../css/index.css" rel="stylesheet" type="text/css"/>
		导入式
			<style type="text/css">
				@import "../css/index.css";
			</style>
		嵌入式和导入式的区别:
			1.<link/>标签属于XHTML,@import是属于CSS2.1
			2.使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
			3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
			[email protected]是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

	4.样式优先级
		行内>内部>外部
		就近原则

二.基本选择器

	1.标签选择器(通过标签名称定位)
		h2{
            color: red;
        }

	2.类选择器(通过标签中class属性的值定位,值可以重复,不能以数字开头)
		.class01{
            color:yellow;
        }
		<h2 class="class01">10-30</h2>
		<h1 class="class01">10-31</h1>

	3.ID选择器(通过标签中id属性的值定位,值不可以重复,不能以数字开头)
		 #id01{
            color: red;
        }
		<h2 id="id01">10-30</h2>
		<h1 id="id02">10-31</h1>

	4.基本选择器的优先级
		不遵循就近原则,无论哪一种样式表的导入,都遵循:id选择器>类选择器>标签选择器

三.高级选择器

	1.层次选择器
		 /*后代选择器*/
        li p{
            background-color: yellow;
        }
        /*子选择器*/
        body>p{
            background-color: aqua;
        }
        /*相邻兄弟*/
        .class01+p{
            background-color: red;
        }
        /*通用选择器*/
        .class01~p{
            background-color: blue;
        }

	2.结构伪类选择器

		ul li:first-child{
            background-color: yellow;
        }
        ul li:last-child{
              background-color: red;
        }
        ul li:nth-child(even){
            background-color: blue;
        }
		/*匹配元素类型*/
        p:first-of-type{
            background-color: pink;
        }
        p:last-of-type{
            background-color: green;
        }
        p:nth-of-type(3){
            background-color: aqua;
        }

	3.属性选择器
		/*包含id属性*/
		a[id]{
            background-color: red;
        }
		/*包含target属性,并且值为_blank*/
        a[target=_blank]{
            background-color: yellow;
        }
		/*包含title属性,并且值以we开头*/
        a[title^=we]{
            background-color: aqua;
        }
		/*包含title属性,并且值以e结尾*/
        a[title$=e]{
            background-color: black;
        }
		/*包含class属性,并且值包含it*/
        a[class*=it]{
            background-color: blue;
        }

  

原文地址:https://www.cnblogs.com/dabrk/p/9887195.html

时间: 2024-10-16 17:14:37

第四章 初始CSS的相关文章

第四章笔记css

第四章 初识CSS 1.CSS(层叠样式表) 2.CSS语法 选择器{ 属性名1:属性值1; 属性名2:属性值2; } 3.引用CSS的三中方式 第一种: 行内样式 例: <a style="color:red;">内部样式</a> 第二种: 内部样式 在head标签中,写入style标签. 例: <head> ...... <style type="text/css"> h1{ ...... } </style

第四章-初识css

1.CSS(层叠样式表) 2.CSS语法 选择器{ 属性名1:属性值1; 属性名2:属性值2; } 3.引用CSS的三中方式 第一种: 行内样式 例: <a style="color:red;">内部样式</a> 第二种: 内部样式 在head标签中,写入style标签. 例: <head> ...... <style type="text/css"> h1{ ...... } </style> </

第二部分初始阶段 第四章 初始不是需求阶段

初始阶段是建立项目共同设想和基本范围的比较简短的起始步骤.为了在随后的细化阶段能够开始编程,它将包括对10%的用例进行分析,关键的非功能需求的分析,业务案例创建和开发环境的准备. 什么是初始阶段 大多数项目需要一个简短的起始步骤,在该步骤中要考虑以下几类问题 1.项目的设想和业务案例是什么 2.是否可行 3.购买还是开发 4.粗略估计一下成本:是一万到十万美元,还是上百万美元 5.项目应该继续下去还是停止 想要定义设想并大致得出所需的预算,就必须研究需求.但是,初始阶段的目标并不是定义所有需求,

web—第四章css&amp;第五章

web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个css文件很多东西都可以在css里面而且修改的话非常方便,但是我还是有一些问题,就是老师叫我们做注册表的时候:年月日我真不相信是用下拉列表一个一个打上去的,我一开始想用时间轴但是太难啦,老师也没说. 随着时间过得很快国庆节也要来临了,这几天老师似乎有点急但是又怕教不好我们所以课程会有点紧张,但是我觉得还是很好跟上

HTML与CSS入门——第十四章  使用边距、填充、对齐和浮动

知识点: 1.在元素周围添加边距的方法 2.在元素中添加填充的方法 3.对齐的方法 4.float属性的使用 这里提到了CSS禅意花园,这块有时间可以玩玩~ margin和padding:用于添加元素周围的间距 14.1 使用边距 margin是边距 参数可以有[1~4]4种类型 14.2 填充元素 padding用于填充border与内容之间的空间 参数与margin一致 14.3 保持对齐 align,对齐: 有text-align,vertical-align 使用值根据自己的需求再自行研

linux第四章实验报告

Linux第四章 用户和文件权限管理 实验环境 公司的linux主机即将提供给技术部作为开发服务器使用,根据部门内项目组的构成情况,首先需要建立相应的组账号.用户账号,并作为目录设置权限,还需要设置一个共用的数据存储目录,便于同事之间的数据交换. 需求描述 1.建立用户目录 创建目录/tech/benet和/tech/accp,分别用于存放各项目组中用户账号的宿主文件夹.例如,kylin用户的宿主目录应位于/tech/benet/kylin. 2.添加组账户 为两个项目组添加组账号benet,a

Java学习笔记—第四章

第四章  变量和常量 1. Java的访问控制修饰符 使用访问控制修饰符可以限制数据的访问权限.访问控制修饰符有4个等级:private.protected.    public和默认(不指定修饰符). 类型/权限 private protected public 默认 所属类 可访问 可访问 可访问 可访问 同一个包中的其他类(包括子类) 不可访问 可访问 可访问 可访问 不同包中的子类 不可访问 可访问 可访问 不可访问 不同包中的非子类 不可访问 不可访问 可访问 不可访问 2. 变量:变

XSS的原理分析与解剖:第四章(编码与绕过)*******************未看**********************

0×01前言 很抱歉,这第四章被我推了几个月,今天是元旦难得有空,就把第四章写下.我先把主要使用的编码说下,介绍完会说下绕过. 本文建议与<杂谈如何绕过WAF>一同阅读. 0×02 URL编码 URL只允许用US-ASCII字符集中可打印的字符(0×20-0x7x),其中某些字符在HTTP协议里有特殊的意义,所以有些也不能使用.这里有个需要注意的,+加号代表URL编码的空格,%20也是. URL编码最长见的是在用GET/POST传输时,顺序是把字符改成%+ASCII两位十六进制(先把字符串转成

CSS3秘笈:第四章

第四章  继承 1.继承:应用在一个标签上的CSS样式被传到其内嵌标签上的过程. 2.继承的局限性: (1)有些属性不会被继承,如:CSS. (2)以下情况不会严格执行继承: ·影响网页元素位置的属性: ·Web浏览器使用它们自己固有的样式为各种标签设置样式: ·当有样式发生冲突时,更具体的样式会胜出.