css入门

发表时间:2017-05-12 16:10:33 浏览量( 20 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

一、为什么需要CSS样式表

HTML标签的外观样式比较单一,页面色彩不生动 ,样式修改不方便,仅有HTML是不能做出多姿多彩的网站的,样式表的作用相当于华丽的衣服,它可以修饰HTML,是我们的网页更加漂亮,样式表还能实现内容与样式的分离,方便团队开发等。

二、css的基础知识

我们要使用css可以在html的head标签中嵌入样式的定义,语法如下:

<!--文档样式表开始,类型为CSS样式-->

<STYLE  type="text/css">

    P  {color:red; font-size:30px; font-family:隶书;}/*样式规则*/

   ……

</STYLE>

所有的样式规则的格式都是:

属性名:属性值;

1、css的选择器

(1)元素选择器,这样页面上面所有的同类元素都会使用统一的样式了。

元素名{样式规则定义}

如果希望其他的标签也能采用P标签的样式,怎么办?

    p{
        color : red;
        font-size: 12px;
}

在html中定义两个p元素,他们的样式就会一样的了。

<p>此生此夜不长好</p>
<p>人生天地间</p>

效果如下:

attcontent/43c697b0-de5a-4dff-a016-cf5d6701b09e.png

(2)id选择器,id选择器是作用于html中的某个id,格式是

#id名称{样式规则定义}

例如页面上面有一个id是sige得div

<div id="sige">
  hello
<div>

定义器对应的样式如下:

#sige {
   font-weight: bold;
   color: #FF0055;
   border: 1px solid;
   border-color: blue;
   width: 200px;
   height: 200px;
}

效果如下:

attcontent/306132a4-b20f-4788-a7e0-879bf18bc436.png

(3)类选择器,这是很常用,也是最灵活的方式,你可以预先定义一类的样式,任何一个html的元素都可以使用class属性来使用这个样式效果,定义格式如下:

.类名{样式规则定义}

例如:

.hi {
font-size: 90px;
color: #009999;
}

在html引用如下:

<div class="hi">使用类选择器</div>

(4)选择器的其他用法。为了更好的支持html的树形结构,css也支持这种写法,比如:

#sige p {
font-weight: bold;
color: #FF0055;
}

上面这样写法就是指id为sige的p元素的样式,还有类似这样的写法

#sige .first p{
 font-size: 100px;
}

上面这样写法就是指id为sige的应用了类选择器first的p元素

2、选择器的优先级

如果我们使用了id选择器,类选择器和元素选择器都重复定义了同一个属性,那么谁的优先级最高呢?这三种优先级的顺序是:id选择器,类选择器和元素选择器

3、css的书写位置

上面的例子我们都是把style写在head的标签里面,事实上我们还可以在每一个html的元素中使用style属性来定义样式,如下面这个例子:

    <div style="background-color: gray;border: 1px solid;"></div>

有的时候我们还会在其他页面用到这些定义的样式,那么我们可以把样式都写在一个外部文件中,然后通过导入的方式给所有的页面素偶共享,这样就可以统一所有页面的效果了。

比如新建一个style.css的文件,把所有的样式定义在这个文件中,然后在html的head元素中引用这个样式,代码如下:

<link rel="stylesheet" href="style.css" type="text/css"></link>

三、基本的css的属性

认识上面css的写法后,我们就会进入一个比较无聊的阶段了,就是熟记一下css的一些基本的常用的样式属性属性值,然后知道一下它们的效果,css也就掌握得差不多了。

font-size:字体大小

font-family:字体类型

font-style:字体样式

text-align:文本对齐

background-color:设置背景颜色

background-image:设置背景图像

background-repeat:设置一个指定的图像如何被重复。可取值repeat-x、 repeat、 no-repeat、repeat-y

margin-top:设置对象的上边距

margin-right:设置对象的右边距

margin-bottom:设置对象的下边距

margin-left:设置对象的左边距

border-style:设置边框的样式

border-width:设置边框的宽度

border-color:设置边框的颜色

padding-top:设置内容与上边框之间的距离

padding-right:设置内容与右边框之间的距离

padding-bottom:设置内容与下边框之间的距离

padding-left:设置内容与左边框之间的距离