在HTML基础的文章中说过,HTML就犹如一栋房子,body就好比一栋没装修的房子,而CSS就是用来装修房子的
一、使用CSS的方法
-
内部样式表
#在head中的title标签下导入 <style type="text/css"> /** css语句*/ </style> -
内联样式
<p style="">测试</p> // 在style中写入对应css语句,用;隔开 -
外部导入
#在.css文件中写css语句然后在head中的title标签下导入 <link rel="stylesheet" type="text/css" href=""/> // href中填入指定的css文件的路径
二、选择器和选择符
-
选择器
-
class类别选择器
#html下 <div class="choose"> class </div> #对应的css 语法: .class值{ } # 类别选择器可以被多个标签同时使用 -
id选择器
#html下 <div id="choose"> class </div> #对应的css 语法: #id值{ } // #+id值 # id是唯一的,一个id只能被一个标签使用
-
-
选择符
-
包含选择符
语法: 父类选择器 子类选择器 ...{ } #html下 <div id="first"> <div class="second"> <p>子类</p> <a href=""></a> </div> </div> #对应的css #first .second p{ } -
群组选择符
语法: 选择器1,选择器2...{ } #html下 <div class="a"> a </div> <div id="b"> b </div> <div class="c"> c </div> <p>p</p> #css下 .a,.b,.c,p{ } -
通配选择符
语法: *{ } #对所有标签作用
三、css常用的属性
width:100px //宽度为100像素,px是像素的意思 height:100px //高度为100像素 background-color:red //背景颜色设为红色,或者可以用#颜色的16进制码 background-image:url() //背景图片 background-repeat:no-repeat // 背景图片是否平铺,no-repeat为不平铺,repeat为平铺 font-size:12px //字体为12像素 line-height:30px //行高为30px font-weight:500 //字体的粗度 color:red //字体颜色 text-align:middle//水平对齐方式 #列表属性 list-style-type: //无序列表前面的那个图标 list-style-position: //列表图片显示的位置,有outside何inside list-style-image: //图标设为对应图片 #文本属性 text-decoration: //修饰文本
-
