css基础(部分)


一.css概念

1.css的概念:层叠样式表。
2.特征:一处写,处处用。


二、选择器

1. 语法:选择器{属性:属性值}
2. 作用:关联html和css的一个中间枢纽
3. 类型(重点):

(1)通用选择器 {属性:属性值}
(2)id选择器
       2-1.在开始标签写 id=属性值
       2-2.在style当中,id找#号,在加属性值
       2-3.id选择器具有唯一性.
       2-4.!important可以提高属性的级别
/
(3)类选择器/class选择器
       3-1.在开始标签写 class=属性值
       3-2.在style当中,class找.号,在加属性值
       3-3.class选择器具有多重性.*/

4. 示例:代码

<style>
		/* 1.通用选择器 * */
		*{text-align: center;font-size: 50px;font-family: 宋体;}
		p{color: #FF0000;}
		/*2. id选择器 
		#id_p1{font-style: italic;color: #B0B0B0;}
		/* 3.class选择器 */
		.class_p1{font-size: 30px;text-align: left;}
		.class_p2{font-family: 微软雅黑;color: #FFA500;}
	</style>
		<p id="id_p1">千锤万凿出深山,</p>
		<p>烈火焚烧若等闲.</p>
		<p class="class_p1 class_p2">粉身碎骨浑不怕,</p>
		<p>要留清白在人间.</p>	

三、css的三种引入

1.三种引入概念及写法

(1)内联:在标签内部写style标签然后逐一写样式
(2)内部写法:在head标签中先写style标签 然后在逐一写样式
(3)外部:一般把写好的样式放在css文件夹中,通过link外部引入即可

2.执行顺序(权重)

2-1.一般情况下,执行**就近原则**
2-2.如果想将某个样式级别提至最高。执行该样式的属性:!important

3.代码:示例

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- link是外部引入css样式的关键词 -->
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
	<style>
		p{color: red;}
	</style>	
	</head>
	<body>	
	<p>我是段落标签呀!</p>
	<font style="color: #ff55ff;font-size: 20px;font-weight: bold;">我是文本标签</font>
	<i>我是倾斜标签哈嘿</i>
	<style>
		b{color:yellow !important;}
	</style>
	<b style="color: orange !important;">我到底是执行哪个颜色????</b>
	</body>	


四、块级元素和内联元素

1. 两者之间的转化:

块级:block         内联:inline
(1)块级->内联:display:inline
     块级特点:可以设置宽高,独占一行进行显示
(2)内联->块级:display:block
     内联特点:排队显示,宽高由内容决定
(3)块级内联:display:inline-block
     特点:既可以排队显示,又可以设置宽高

2.代码:示例

<style type="text/css">
		#box{
			width: 400px;
			height: 160px;
			border: 1px solid red;
			margin: 0 auto;
		}
		img{
			width: 100px;
			height:150px;
			border: 1px solid red;
		}
		.box1,.box2{
			display: inline-block;
		}
	</style>
	<body>
		<div id="box">
			<div class="box1">
				<img src="img/方世玉.jpg" >
			</div>
			<div class="box2">
				<img src="img/巨鄂.jpg" >
			</div>	
		</div>
	</body>

(注:display:inline-blockdisplay:block是使用最频繁)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值