css设计指南学习笔记

最新推荐文章于 2025-06-28 14:12:51 发布

原创最新推荐文章于 2025-06-28 14:12:51 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

知识储备同时被 2 个专栏收录

32 篇文章

订阅专栏

css

2 篇文章

订阅专栏

这篇博客详细介绍了CSS中兄弟元素选择器的使用，如h1~p选择器，以及链接的各种伪类状态如a:link、a:visited、a:hover和a:active。此外，还探讨了伪元素的应用，包括清除浮动的方法和固定背景图片的实现。文章提到了浏览器前缀问题，并推荐了-prefix-free脚本以简化工作。最后，讨论了字体大小的设置，如px、em和rem单位，以及font-variant属性和下角标、上角标的使用。

兄弟元素的选择
h1 ~ p 选中h1后面的所有P元素
链接返回页面顶部
链接到此页面中#box元素的位置
伪类的实用
a:link 初始化的链接状态
a:visited 链接点击之后的状态
a:hover 鼠标悬浮的状态
a:active 鼠标按下的状态
#box:target a标签的href为#box ，点击a标签后，#box元素的样式

伪元素

 p::first-letter
 p::line  {    font-variant：small-caps  }

清除浮动

<title>菜鸟教程(runoob.com)</title>
	<style>
		img {
			float: left;   // 让后面的p可以跟上来
		}
		p::after {  		// 让下一张图片不跟上来
			content: "";
			display:block;
			clear:both;
			height:0;
		}
	</style>
</head>
<body>
	<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
	<p>我</p>
	<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
	<p>我</p>
	<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
	<p>我</p>

</body>

效果：
在这里插入图片描述
8. background-attachment:fixed;
网页很长，整体加背景图片时，不需要把图片做的特别长，用这个属性就行，反面例子：公司官网

不同的浏览器支持一些不同的属性，前面要加前缀，
如 -webkit-transform: skew(45deg)
可以使用-prefix-free 腻子脚本，自动添加
background: linear-gradient()

p{
height: 300px;
	background: linear-gradient(#fff,#5d5 50% , #dd5);
}
p.p2 {
	background: linear-gradient(#fff 20%, #5d5 50% , #dd5 80%);
}
p.p3 {
	background: linear-gradient(#fff 20%, #5d5 50% , #dd5 80%, #5dd 80%);
}

效果：
在这里插入图片描述
11. 字体备选项

 	.serif {
		font-family: verdana, tahoma, sans-serif;
	}
	.sans {
		font-family: helvetica, arial, sans-serif;
	}

font-size: px em rem
px 绝对单位
em 相对单位以最近的设置了绝对单位的祖先为参考，如果都没有，是16px;
rem 根相对单位 root em 以HTML根元素为参考

ps: 如果一个元素没有设置font-size；那他是以em为单位，一层一层往上找
font-variant: small-caps; 字母变大写
^{下角标标签}
_{上角标标签}