CSS小白

CSS样式

使用CSS样式方式

 

 

在标签内使用CSS样式，作用于本标签

<div style="color:red;"></div>

在当前页面使用CSS样式，作用于当前页面

<style type="text/css">

</style>

引入CSS样式文件，任何页面都可以引用

<link rel="stylesheet" href="样式文件路径"/>

添加网页标题图标

1.将图标名修改为favicon.ico,放置项目根目录

2.手动引入字体图标

<link rel="icon" href="favicon.ico" />

CSS样式语法、

选择器{属性:属性值;属性:属性值;}

基本选择器

1.标签(元素)选择器  重点

div{ color:red;} 选择到网页中所有的div，改变字体颜色为红色

2.类选择器  重点

类样式

.className{color:red;}在网页中类样式可以重复调用

引用类样式

<div class="className"></div>

<p class="className"></p>

一个标签可以同时引用多个类样式

<style>

   .color{

      color:red;

   }

   .size{font-size:18px;}

</style>

<div class="color size">同时引用多个类样式用空格隔开</div>

font-awesome-4.7.0字体图标的使用

1.解压文件，将文件夹复制到你的项目中

2.引入CSS文件

<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>

3.添加图标

<i class="fa fa-home"></i>

3.ID选择器   重点

1.给元素添加ID属性，ID值是唯一，再一个页面不可以重复出现

<div id="div1"></div>

2.定义样式

<style>

   #div1{ color:red;}/*选择到id名div1的元素，改变字体颜色*/

</style>

4.通配符 *，很少用，选择到网页中所有的标签,一般用于初始化网页

*{color:red;}

5.多条件选择器，同时选择  重点

div,p{color:red;}选择到网页中所有的div和p

div,.className,#div1{}

层次选择器

1.

div a{ color:red;}父子关系(上下级关系)，选择到div里的“所有”a标签

html示例

<div>

   <a href="#">a会被选择</a>

   <p>  

      <a href="#">a会被选择</a>

   </p>

</div>

2.

div>a{color:red;}父子关系(上下级关系)，选择到div里的子“a”标签

html示例

<div>

   <a href="#">a会被选择</a>

   <p>  

      <a href="#">a不会被选择</a>

   </p>

</div>

3.

div+a{color:red;}兄弟关系 选择到div后紧邻的第一个a标签，只能选择一个元素

4.

div~a{color:red;}兄弟关系 选择到div后的所有a标签

即...又包含...

div.className{color:red;}

<div class="className"></div>

样式代码

<style>

   div.div1 ul.box li,div.div1 p{

      color:red;

   }

</style>

对应写出html代码

<div class="div1">

   <ul class="box">

      <li>li</li>

   </ul>

   <p></p>

</div>

字体样式

color:red;字体颜色，

颜色取值

英文，red

十六进制值 #ff0000

rgb(255,0,0)

rgba(255,0,0,0.5) 最后一个参数是透明度，0-1 0是透明 1不透明

<style>

   p{

      color:red;

   }

</style>

font-size:20px;字体大小

font-weight: bold;字体加粗

font-family: "微软雅黑";字体

font-style: italic;斜体

text-align:center;文本对齐方式，center居中   left左对齐   right右对齐

line-height:50px;行高，注意：文字显示在50像素的中间

letter-spacing: 10px;字符间距

width:1000px;宽

height:200px;高

周总结发布到http：//www.CSDN.net

text-decoration: none 去掉下划线

text-decoration: underline 添加下划线

text-decoration: line-through 删除线

text-decoration: overline 上划线

字体样式设置

语法

Font:font-style斜体 font-weigh加粗 font-size字体大小/line-height行高 font-family字体

背景

Background：背景颜色 背景图片路径 平铺方式 横向位置 纵向位置 是否固定背景

背景图片的平铺方式

no-repeat 不平铺

repeat 平铺（默认平铺）

repeat-x 横向平铺x轴（对齐方式：左，中，右）

repeat-y 纵向平铺y轴（对齐方式：上，中，下）

横向位置：left左，center中，right右，100px—-100px

纵向位置：top上，center中，bottom下，100px—-100px

Body{background：#888 URL（图片路径） no-repeat center top fixed;}

Background-color:背景颜色

Background-image:url(图片路径)：背景图片

Background-repeat：平铺方式

Background-position：left top：图片位置

Background-attachment：fixed：是否固定图片