CSS课堂笔记

最新推荐文章于 2024-08-12 22:07:17 发布

oooo1111100000

最新推荐文章于 2024-08-12 22:07:17 发布

阅读量259

点赞数

文章标签： css

本文链接：https://blog.csdn.net/pythonan/article/details/106594856

版权

本文详细介绍了CSS的使用方法，包括选择器（元素、ID、类、伪类等）、显示属性（长度、颜色、文档流）、定位（相对、绝对、固定）以及字体和文本样式。此外，还探讨了盒子模型、布局技巧和浮动，是学习CSS的全面指南。

摘要由CSDN通过智能技术生成

三种使用方法

Css样式名值对结构
style =" key:value ; key:value;" 冒号分号内联一般不用

p {
   
	color:green;         //大括号  分号  
	font-size:33px;         //内部样式表所有p标签都变化   
	}            //只能本网页

把内部样式表写在外部文件中可以复用   
而且可以使用浏览器缓冲机制  提高速度  更好的体验

<link rel = " stylesheet"  href = "  ">//link引入

<style>
中间是CSS区域
p{
             p是选择器 
	color:red;        声明块  键值对   样式
	}
<\style>

p{ } h1{ } div{ }

#red{
   
		color:red;
}
<p id="red">

.blue {
   
			color:blue;l    //班级分类
}
<p class="blue"><p>

*{
    //页面中所有元素 

}

div.red{
           //同时满足div和red    *div在前*
  					//点号且的意思
}

h1,span{
      //满足其中一个     逗号和的意思

}

<div>
		<p>
		<span>
		</p>
		<span>
</div>

div > span {
         //选中子元素span    只有第二个span
}

div span     后代选择器   空格    为span的后代

div + span       兄弟选择器     是span的兄弟

div ~ span             兄弟们选择器   波浪号

div.red > span 混合 div >span>p 孙子选择器都可用

[属性名]
p[属性名+属性值] 可以加类名
[属性名^=属性值] 指定值开头
[属性名$=属性值] 指定结尾
[属性名*=属性值] 包含指定值

它父元素的第一个子元素被点击的子元素鼠标移入的子元素等等
不存在的类特殊的类特殊的不存在的状态

:first-child        //它父元素的第一个子元素   冒号
:last-child   		//它父元素最后一个
:nth-child(2n)  even 它父元素偶数位    2n+1 odd 它父元素奇数位  
所有子元素不管类型

:first-of-type  :last-of-type :nth-of-type()     
它父元素的同类型子元素

:not(nth-child(3))     //除了第三个子元素
:empty  // 没子元素的元素

a:link                 //没访问过的链接
a:visited			//访

关注