CSS基础 - 什么是CSS

CSS基础 - 什么是CSS

CSS基础了解：

1.CSS指层叠样式表(Cascading Style Sheets)
2.样式定义如何显示HTML元素
3.改变所有页面的布局和外观

基础CSS展示：

1.给段落追加背景色

<p style="background: yellow;">我是追加了背景色的</p>

这个追加的是黄色的背景色哦

2.限制段落高度、宽度

<p style="background: yellow; width: 250px;height: 30px;">我是限制了段落高度和宽度的</p>

限制了段落的宽度为250px，高度为30px，沿用了上面的背景色为黄色。

3.设置字体颜色、字体大小

<p style="color:red;font-size:30px;">为了联盟的荣耀</p>

4.设置文字对齐方式

（1）左对齐

<p style="text-align: left;">左青龙</p>

其实页面靠左就是默认模式

（2）右对齐

<p style="text-align: right;">右白虎</p>

（3）居中对齐

<p style="text-align: center;">老牛在中间</p>

5.修改页面元素相对位置

<p style="margin-top:100px">我在哪里，哦距离上面100px哦</p>

可见下图中空白的地方就是语句 “margin-top:100px”的功劳啦，这表示离上方100px的距离。

6.给页面元素设置边框

（1）设置边框

<p style="border: 1px solid red;">纳尼纳尼纳尼~</p>

设置页面元素边框线的粗细为1px，颜色为红色的边框线，长度随页面长度。

（2）设置边框圆角

<p style="border: 1px solid red;border-radius:10px;">俺是圆角了哦</p>

将直角的边框设置为圆角，border-radius:10px 表示设置圆角的大小哦

7.控制元素显示与隐藏

<P style="display: none;">我是不可战胜的~~~</P>

从图片上可以看出，本来呢是有两个p标签的，可是页面上只显示了一条。就是因为有了”display:none;”语句，意思是不显示该标签。所以页面上就只有一条啦。

8.很多别的样式

更多样式尽在：http://lzw.me/pages/css3