CSS样式概述
在上期我们学习的是关于html的基本标签,今天我们来学习一下CSS样式的基本知识概念。
大家知道,在一个网页的制作过程中,html仅仅是起到了整体结构的作用,而其中的修饰样式部分却是我们CSS来完成的;今天我们来初步的认识一下什么是css样式,css样式的作用又是哪些。
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS概述</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
/*头部样式(内联样式)*/
p{
/*排版布局*/
width:200px;
height:200px;
/*装饰*/
background-color:pink;
color:white;
}
.one{
width:200px;
height:200px;
background-color:pink;
color:green;
}
.two{
width:200px;
height:200px;
background-color:yellow;
}
#black{
width:200px;
height:200px;
background-color:black;
color:white;
}
/*重置样式(浏览器不同,解释不同,边距也不一样,使用)*/
*{
margin:0px;
padding:0px;
}
</style>
<link href="./css.css" type="text/css" rel="stylesheet" /><!-- 外部样式 -->
</head>
<body>
<div style="width:200px;height:200px;background-color:red;">这是第一家装修公司(行内样式)</div>
<p>这是第二家装修公司(头部样式(内联样式))</p>
<div>这是第三家装修公司(外部样式)</div>
<div class="one">今天天气真好,我喜欢粉色</div>
<div class="two">我充满了热情,我喜欢黄色</div>
<div id="black">我喜欢黑色</div>
<a href="https:www.baidu.com">百度</a>
</body>
</html>
<!--
什么是样式
装修公司 进行对页面的美化
样式的功能
排版布局 装饰颜色
样式书写
选择器(在网页中,需要被添加样式的元素){申明}
(要装修的物件)(要装饰成什么样)
申明格式:
width:100px;
属性:属性值;(记得有分号)
p{background-color:red;color:blue;}
css样式的书写位置(优先级是:行内样式,头部样式,外部样式)
行内样式
写在标签里面style=""
头部样式
写在头部标签里面<style type="text/css" > </style>
外部样式
写在css文件中,申明编码 <link href="" rel="stylesheet" tylpe="text/css"/>
在头部样式和外部样式中,都需要选择器
选择器
选择器 选择符
id #(井号) id具有唯一性,相当于我们的身份证
class .(点) class可以重复,相当于人的名字
id和class可以同时写在一个标签中,但是会以id为准
选择器是写在所修饰元素中的尖括号中,选择符是写在头部标签的<style>中
通配符选择器(*)
是一个特殊的选择器,能够选中所有的标签元素
-->
效果图:
其中三种样式是特别注意的,还有就是选择器的分类和表示方法。