CSS1

CSS

层样叠式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

作用

CSS就是网页的化妆师，可以让页面变得更加美观

如何使用

  1. 直接写在标签内
  2. 写在style 标签内
  3. 使用外部 .css 文件
  4. 注意：优先级为执行顺序，从上到下

示例

<!--直接写在标签内，即行内样式-->
<p style="color:aqua">样式1</p>

<!--写在 style 标签内，为内部样式属性-->
<head>
	<style type="text/css">
		p{
		background:yellowgreen;
		width:300px;
		}
	</style>
</head>
<p>样式2</p>

<!--使用外部.css文件-->
<head>
	<link rel="stylesheet" type="text/css" href="css/01css_test.css"/>
	div{
		color:red;
	}
</head>
<p>样式3</p>

CSS选择器

作用

给指定的元素设置样式，能够更加精准

权重（优先级）

  • 选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式
  • id > class > 标签 > 通配符
  • 复杂选择器的优先级比较如下：
    • 先比 id（最高位），再比 class，最后比 tagName （标签个数）
    • id 个数不等，id越多，优先级越高
    • id相同，class越多，优先级越高
    • id，class都相同，则标签越多，优先级越高
    • 行内样式>内部=外部

种类

有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器

ID选择器
  • 通过标签的 id 属性，选择对应的元素
  • 注意： id是唯一的
class选择器

通过标签的 class 属性 ，选择对应的元素 借助了一个类的概念，一处定义，可以多处使用

群组选择器

群组选择器是可以同时选择多个标签的选择器

层次选择器

层次选择器分为，子代、后代、相邻和兄弟等四种选择器

简单选择器示例

<head>
	<style>
		/*默认标签选择器：作用于后面所有的p标签*/
		p{
		color:red;
		}
		
		/*id选择器：作用于某个id，需要标签添加一个id属性*/
		#1/* #+id_name */{
		color:yellow
		}
		
		/*class选择器：作用于多个class标签，可以给多个标签添加class属性*/
		.2/* .+class_name */{
		color:green
		}
		
		/*通配符选择器：作用于页面上所有的标签*/
		*{
		color:blue
		}
	</style>
</head>

复杂选择器示例

<style>
	/* 群组选择器：同时对多个选择器进行样式设置，每个选择器之间用逗号隔开*/
	#p1,span{
	color:red;
	}
	
	/*兄弟选择器：用~连接，~后面的空格都会选中，~两边的空格可写可不写*/
	#1~ul{}/*给id为1的标签的兄弟渲染，这个id为1的标签本身不渲染*/
	
	/*相邻选择器：只会选择相邻的标签，用+隔开*/
	#1+ul{}/*给id为1的标签相邻的兄弟标签渲染，这个id为1的标签本身不渲染*/
	
	/*后代选择器：作用于所有满足的后代上，用空格隔开，是使用最多的选择器*/
	div ul{}/*div标签的ul标签会被渲染*/
	
	/*子代选择器：只会作用于子代，不会作用于孙辈，用>隔开*/
	div>ul{}/*div中的第一代ul标签会被渲染*/
	
	/*属性选择器*/
	input[type=checkbox]{
	width:100px;
	height:90px;
	}
</style>

伪类选择器示例

<style>
	/*未访问时*/
	a:link{color:skyblue;}
	
	/*访问后*/
	a:visited{color:aliceblue;}
	
	/*鼠标划过/悬停时*/
	a:hover{color:#87CEEB;}
	
	/*激活/点击时*/
	a:active{color:#FF0000;}
</style>

CSS字体/文本/背景

字体样式

  • font-family：字体
  • font-size：字体大小，单位有
    • px：像素
    • rem：相对于html（根标签）的字体大小
    • em：等于父级的字体尺寸
  • font-style：字体样式
    • normal：默认-文字正常
    • italic：文字斜体
    • oblique：文字斜体
  • font-weight：字体粗细
    • normal：默认字体-400
    • lighter：较细-100
    • bold：加粗-700
    • bolder：很粗-900
  • font-variant：大小写
    • small-caps：字母变大写，字体变小
  • font：复合样式
    • 示例：font:italic small-caps bold 20px
    • 有顺序：样式-大小写-粗细-大小-字体，大小和字体是必备参数

文本样式

  • text-align：对齐方式
    • left左对齐，right右对齐，center居中对齐
  • text-indent：首行缩进
    • 单位：em-一个中文的大小
  • text-decoration：文本线
    • underline：下划线
    • none：可以取消超链接的下划线
    • text-decoration-style：设置线的样式
      • text-decoration-color：设置线的颜色
  • letter-spacing：字距
    • 单位：em
  • word-spacing：词距
    • 单位：em
  • line-height：行高（单行文本的垂直居中：行高=高度）
  • white-space：控制换行
    • normal：正常换行
    • nowrap：不换行
  • text-overflow：出现省略号
    • ellipsis

背景样式

  • background-color：背景颜色
  • background-image：背景图片
    • 示例：background-image:url("路径·")
  • background-repeat：背景铺盖
    • no-repeat
    • repeat-x
    • repeat-y
  • background-position：背景定位
  • center
    • left
    • right
    • 10%（距离左边10%）10%（距离右边10%）
  • background-size：背景大小
    • 100%
    • px
  • background：复合样式，定位后面跟大小，格式为：定位/大小
posted @ 2025-02-19 00:02  micryfotctf  阅读(44)  评论(0)    收藏  举报