【CSS基础】

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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值