css 的一些学习(一)

       在前端的学习中总会遇到各种各样的问题,而且是越来越多你所没有想到的问题,但当你发现并用自己的努力成功解决的那一刻是那么的爽。所以,一定要坚持做下去,一定可以看到希望。

        学习总是那样,知道它运用它掌握它,对css的一些记录。

        css的简介:

              css  层叠样式表(Cascsding Stytle Sheets),用来控制多重网页的样式和布局。

      (一)css的引入

          作为初学者,看文档,去运用的时候,总是会出现这样的感觉:“我是这样写的啊,为什么不可以啊”可能有些幼稚但的确存在,我们需要知道,我们应该引入css文件

         a:外部样式表。当一个样式可以应用到多个页面时,我们通过<link>标签引入 css

HTML:

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

Js:

.attribute{
    height : 10px;
    width : 20px;
}

这是一些固定的格式,浏览器从   mystyle.css 中读取你想要的css样式。

        b:内部样式表, 当某个部分需要特殊的样式就可以使用。通过<style>标签定义样式表

<head>
<style type="text/css">
  hr {color: red;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

 c:多重样式,(还没有用到太多所以没有太理解,可以去这里看http://www.w3school.com.cn/css/css_howto.asp

     (二)css的样式及一些应用

                a:背景色

                使用background-color属性

例:把元素的背景色设为红色

p {background-color: red;}

 这里需要注意:background-color不能继承,其默认的是transparent。即透明的意思。

                  b:css水平对齐

                     css对齐元素有多种形式:

                     对齐块元素

在这之前我们需要知道什么是块元素:占据全部可用的元素,并且使用后会换行

常见的块元素标签有<div>等().

                    使用margin属性来水平对齐(注意是水平对齐)

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

 这里是将左右外边距全部设置为“auto”,就可以将块元素水平对齐

  注意:如果宽度设置100%,将没有效果。                

           

css的学习也是很漫长的道路,这里将自己在学习中认为的重点和需要去注意的标注,养成良好的学习文档的习惯。附上网址,静下心来可以看到好多原来没有看到的东西(http://www.w3school.com.cn/css/css_align.asp

相关推荐