css入门案例示范

css入门

一、为什么需要CSS样式表

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

我还是要推荐下我自己创建的web前端资料分享群606721798，这是web前端学习交流的地方，不管你是小白还是大牛，小编都欢迎，不定期分享干货，包括我整理的一份适合零基础学习web前端的资料和入门教程。

二、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>

效果如下：

 

 

（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;
}

效果如下：

 

 

（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：设置内容与左边框之间的距离

请发送你要查询内容的编号给我 我为自动为你解答 例如A

第一天、html标签，超链接和表格:

A.理论学习和配置tomcat

B.html初步认识

C.常用的html标记

D.table的基本介绍

第二天、表单和框架css和div:

E.表单

F.框架

G.css入门

H.网页排版实战

第三天、javasctipt入门:

I.js入门

J.基本语法和基本对象

K.时钟实现

L.计算器的实现

第四天、javascript常见示例:

M.数组和(全选全不选)

N.级联

O.表单验证

P.js修改html的css样式

第五天、javasctipt的框架:

Q.json

R.jqeuery入门

S.jquery示例