首页 > 其他分享 >CSS初步

CSS初步

时间:2024-10-01 13:49:47浏览次数:8  
标签:元素 color h1 初步 font 选择器 CSS

1.CSS引用
<link href="css/styles.cs" type="text/css" rel="stylesheet">
2.选择器
(1)通用选择器*{},选取所有元素
(2)类型选择器h1,h2,h3{}
(3)类选择器.note{}应用所有类名为note的元素
  p.note{}应用于所有p元素中类名是note的元素
(4)ID选择器#introduction{}
(5)子元素选择器 li>a{}应用于所有父元素是Li的a元素。对其他<a>不起作用
(6)后代选择器p a{}应用于所有位于<p>元素中的<a>元素
(7)相邻兄弟选择器h1+p{} 应用于h1元素后第一个p元素
(8)普通兄弟选择器h1~p{}如果有两个P元素都是h1的兄弟元素,两个都被选中。
3.CSS规则级联
<!DOCTYPE html>
<html>
	<head>
		<title>How CSS Rules Cascade</title>
		<style type="text/css">
			* {
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				font-family: "Courier New", Courier, monospace;}
			i {
				color: green;}
			i {
				color: red;}
			b {
				color: pink;}
			p b {
				color: blue !important;}
			p b {
				color: violet;}
			p#intro {
				font-size: 100%;}
			p {
				font-size: 75%;}
		</style>
	</head>
	<body>
		<h1>Potatoes</h1>
		<p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties.</p>
		<p>They are usually described as early, second early and maincrop potatoes.</p>
	</body>
</html>

(1)就近原则
  如果两个选择器相同,后出现的优先级高于先出现的。
(2)具体性原则
如果一个选择器比其他选择器更加具体,那么具体的选择器优于一般的选择器。
h1优于* p b优于p
p#inftro优于 p
(3)重要性,添加!important强调规则重要。
4.继承
font-family可以继承。background-color,border不会继承。
将属性值设为inherit来强制继承
<!DOCTYPE html>
<html>
	<head>
		<title>Inheritance</title>
		<style type="text/css">
			body {
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
				padding: 10px;}
			.page {
				border: 1px solid #665544;
				background-color: #efefef;
				padding: inherit;}
		</style>
	</head>
	<body>
		<div class="page">
			<h1>Potatoes</h1>
			<p>There are dozens of different potato varieties.</p>
			<p>They are usually described as early, second early and maincrop potatoes.</p>
		</div>
	</body>
</html>

标签:元素,color,h1,初步,font,选择器,CSS
From: https://www.cnblogs.com/zhongta/p/18442841

相关文章

  • 祝祖国母亲生日快乐-HTML+CSS实现五星红旗
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title>......
  • 第四章 CSS样式基础
    4.1CSS概述4.1.1CSS的基本概念CSS中文释义为“层叠样式表”,它是以HTML为基础,设置网页的外观显示样式,如字体、颜色、背景的控制及整体的布局等,还可以针对不同的浏览器设置不同的样式4.1.2传统HTML的缺点1.维护困难:为了修改某个特殊标记的格式,需要花费很多时间,尤其是对......
  • 基于HTML、CSS和JavaScript的滚动数字显示效果,类似于老式计数器或电子表上的数字滚动
    这段代码实现了一个基于HTML、CSS和JavaScript的滚动数字显示效果,类似于老式计数器或电子表上的数字滚动效果。以下是代码的详细解释说明:HTML结构基础设置:<!DOCTYPEhtml> 声明文档类型为HTML5。<htmllang="en"> 指定文档语言为英文。<metacharset="UTF-8"> 和......
  • css的动画属性
    CSS动画属性是CSS3的一个重要特性,它允许你创建平滑的过渡效果,增强用户的交互体验。CSS动画可以通过@keyframes规则和animation属性来创建。animation属性animation属性是一个简写属性,用于设置动画的多个属性,包括动画名称、持续时间、时间函数、延迟、迭代次数和方向等。1.a......
  • 【CSS/HTML】footer固定在页面底部的实现方法总结
    方法一:footer高度固定+绝对定位HTML代码:<body><header>头部</header><main>中间内容</main><footer>底部信息</footer></body>CSS代码:*{margin:0;padding:0;}html{height:100%;}body{min-height:100%......
  • 第四章 CSS样式基础
    4.1CSS概述随着HTML的发展,为了满足页面设计者的要求,HTML添加了很多显示功能,但是随着这些功能的增加,使得HTML变得越来越杂乱,HTML页面也越来越臃肿,CSS便诞生了。CSS是用于简化HTML标签,把关于样式部分的内容提取出来,进行单独地控制,使结构与样式分离式开发。对页面布局等的控制......
  • Shell脚本基础知识-初步版
    本文是笔者研究生期间在阅读《Linux命令行与shell脚本编程大全》之后总结出来的一些重点知识的记录,在此重新整理输出。以便在给上个帖子涉及到的相关知识点进行一下讲解,帮助自己复习shell脚本的首行规范化应该是#!/bin/bash#functiondescription其中第一行必须如此,#后......
  • WEB 编程:富文本编辑器 Quill 配合 Pico.css 样式被影响的问题之还是 iframe
    这个系列已经写了3篇了。这篇写如何使用iframe解决标题里面提到的问题。前情提要请看上一篇博文:WEB编程:富文本编辑器Quill配合Pico.css样式被影响的问题之ShadowDOMWEB编程:富文本编辑器Quill配合Pico.css样式被影响的问题之ShadowDOM-CSDN博客缘由缘由仍......
  • css基础2
    一:页面布局盒模型边界(border)和其他内容的距离是(margin)文本内容和边界的距离是(padding)padding和margin属性单位em是当前文本的大小,2em是两倍文本的距离四个值按顺时针方向代表top,right,bottom,lefth1{padding:1em2em3em4em;}h1{margin:1em2em3em4em;}两个值依次代表t......
  • 现代CSS
    现代CSS现代CSS框架图CSS函数现代Web布局防御式CSS原文链接:https://anyaowl.cn/blog/detail/7......