css学习笔记

最新推荐文章于 2024-05-06 21:08:34 发布

yxl_d

最新推荐文章于 2024-05-06 21:08:34 发布

阅读量135

点赞数

分类专栏：网页制作

本文链接：https://blog.csdn.net/yxl_d/article/details/88921166

版权

网页制作专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css

一.简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二.四种引入 CSS 的方式：

1.直接在标签里面定义style的属性（也叫内联样式）,这样的标签很长，不利于维护如：

<body style="background-color: red;">

<h1 style="text-align: center;clolr: red;">xxx</h1>

2.style 标签 一般写在head里面（也可以写在其他地方）如：

<style>

body{

background-color: red;

}

</style>

3.外部文件css link标签引入的方法 用link标签的方式引入一个stylesheet，新建一个.css的文档用link标签进行链接，为外部样式如：

<link rel="stylesheet" href=./a.css>

注：这个link与当前文档关系为stylesheet，

4.css import 在css里面引入另一个css如：
在执行body前先执行b.css文件

@ import URL（./.b.css）

注：（）里面可以是相对路径也可以是绝对路径

  body{
    
    background-color: red;
    
    }

三.css选择器

1.元素选择器

使用时这个元素都会被修饰

2.Id选择器

唯一单独的使用属性

3.Class选择器

处理多个标签的使用
如：

<!DO<!DOCTYPE html> 
<html lang="en"> 	
           <head> 		
					    <meta charset="UTF-8"> 		
					    <title>css选择器</title> 	 		
					    <style type="text/css">
			 /*派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁*/
			  li strong { 	
						  font-style: italic; 	
						  font-weight: normal; 	
						  color: red;
			   } 
			  /*id选择器。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。*/ 
			  #red{ 	
			      color: red; } 
			  #orange{ 	
			       color: orange; }
			  /*类选择器 。在 CSS 中，类选择器以一个点号显示*/
			   .center{ 	
			   text-align: center; 	
			   color: blue; } 
			   /*属性选择器。对带有指定属性的 HTML元素设置样式。*/ 
			   [title]{ 	
			   color: aqua; }
			                </style> 	
			    </head> 
			    <body> 		
			             <p><strong>我是斜体字</strong></p> 
			             <ol> 
			             <li><strong>我会变成粗体字，原本我是斜体字</strong></li>
			              </ol> 
			     <h1 id="red">我是id选择器</h1> 
			     <h2 id="orange">我也是id选择器</h2>
			      <h3 class="center">我是类选择器</h3> 
			      <h5 title="">我是属性选择器</h5> 	
			      </body> 	
</html>

在这里插入图片描述