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)
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT