【CSS基础】

原创
已于 2024-05-09 15:46:22 修改 · 634 阅读
14 ·
CC 4.0 BY-SA版权
文章标签：
#css #前端
于 2024-05-09 15:43:59 首次发布
                    
                        
                    
                    4.CSS基础 
4.1css的介绍 
 
 层叠样式表(英文全称:Cascading Style Sheets),是一种对web文档添加样式的简单机制，属于表现层的布局语言.
 
 
4.2css基础语法 
 
 CSS语法由两部分组成：选择符、声明。   

声明包括：属性和属性值

选择符 {属性: 属性值 ;属性:属性值}
div{width:500px;}
 div----->选择符
 with---->属性
 500px--->属性值
 width:500px---->声明
 
 
4.3语法说明 
 
 每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
属性必须放在花括号中，属性与属性值用冒号连接。
每条声明用分号结束。
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
在书写样式过程中，空格、换行等操作不影响属性显示。

例如：div{ width:200px;height:200px;background:red; }
 
 
4.4 样式的建立 
4.4.1内部样式(嵌套到页面中) 
 
 语法
  <style type="text/css">
      css语句
  </style>

注：使用style标记创建样式时，最好将该标记写在<head></head>中;

<head>
		<meta charset="UTF-8">
		<title>index2</title>
		<style type="text/css">
			div{
      
      
				width: 100px;
				height: 200px;
				background-color: red;
			}
		</style>
</head>
***此样式会给当前页面body中的所有div添加属性***
 
 
4.4.2外部样式(使用最多) 
 
 a:外部样式表的创建
b:外部样式表的导入
首先在css文件夹中创建.css文件
在css文件中写样式
div{
	width:100px;
	height: 100px;
	background-color: blueviolet;
}

语法： <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

<head>
	<meta charset="UTF-8">
	<title>index2</title>
	<link type="text/css" rel="stylesheet" href="css/index2.css" />			
</head>

说明：
使用link元素导入外部样式表时，需将该元素写在文  档头部，即<head>与</head>之间。      
rel：用于定义文档关联，表示关联样式表；      
type：定义文档类型；
 
 
4.4.3内联样式(表行间样式,行内样式,嵌入式样式)(用的很少) 
 
 优先级 最高 高于外部的样式的优先级
语法：<标签 style=“属性：属性值;属性:属性值;”></标签>

例如：<div style="width:100px;height:100px;"></div>
 
 
4.5样式表的优先级 
 
 以后使用的时候尽量使用一种样式,避免优先级问题

内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高
 
 
4.6css选择符(选择器) 
 
 为了找到要修改样式的标签,所以采用选择器
选择符的定义
   选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.

  常用的选择符有十种左右 类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。
 
 
4.6.1元素选择符/类型选择符（element选择器) 
 
 语法：元素名称{属性：属性值；}
例如:css文件中的div{
	width:100px;
	height: 100px;
	background-color: blueviolet;
}
----这种选择符会找到当前页面所有的div,并且给其添加属性----

类型选择符是根据html语言中的标记来直接定义

说明：
  a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,strong,span......等。
  b)所有的页面元素都可以作为选择符; 用法：如果想改变某个元素得默认样式时，可以使用类型选择符；

用法：
   （1）如果想改变某个元素的默认样式时，可以使用类型选择符；（如：改变一个p段落样式）
   （2）当统一文档某个元素的显示效果时，可以使用类型选择符；（如：改变文档所有p段落样式）
案例：搭色块
 
 
4.6.2id选择器 
 
 语法：#id名{属性：属性值;}---->在css文件中
说明：
1、当我们使用id选择符时，应该为每个元素定义一个id属性；  如：<div id="top"></div>  
 2、id选择符的语法格式是“#”加上自定义的id名；  如：#box{width:300px; height:300px;}  
 3、起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)  
 4、一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素 对象。  
 5、最大的用处：创建网页的外围结构
 
 
4.6.3class选择器 
 
 语法：.class名{
    
    属性：属性值;}---->在css中书写
.top{
    
    
	background-color: blue;


                
最低0.47元/天解锁文章