初学HTML5--CSS样式(一)
来源:互联网 发布:知的太多所以疯了 编辑:程序博客网 时间:2024/05/16 06:54
-什么是CSS
CSS的全称是Cascading Style Sheets 层叠样式表
它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
-CSS的编写格式是键值对形式的比如:
color:red
background-color:blue
font-size:20px
冒号:左边是属性名,冒号:右边是属性值
-CSS的3种书写形式
1.行内样式:(内联样式)直接在标签的style属性中书写
<body style="background-color: paleturquoise;"> <div style="color: blue; font-size: 28px; background-color: antiquewhite">我是容器标签 </div> <!--style设置了字体颜色color: 字体大小font-size: 边框border: --> <!--边框boder:设置了宽度 样式:(solid 实线 dashed:虚线 double: 双线) 颜色--> <p style="color: pink; font-size: 20px; border: 5px dashed mediumpurple">我是段落标签</p></body>
2.业内样式:在本网页的style标签中书写
<!DOCTYPE html><!--<html lang="en">--><head> <meta charset="UTF-8"> <title>CSS页内样式</title> <!-- css的规律: 1.就近原则 2.叠加原则 --> <!--设置样式--> <style> div{ /*设置div标签内的字体颜色为红色*/ color: red; /*字体大小为30px*/ font-size: 30px; /*边框:宽度:2px 实线 灰色*/ border: 2px solid gray; } p{ /*设置p标签内的字体颜色为蓝色*/ color: blue; /*字体大小18px*/ font-size: 18px; /*背景颜色粉色*/ background-color: pink; } </style> <!-- 网站 = N个网页 + 服务器 + 数据库 + ... --></head><body> <div>我也是容器标签</div> <div>我也是容器标签</div> <div>我也是容器标签</div> <div>我也是容器标签</div> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p></body></html>
3.外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
index.css文件中设置样式,代码如下:
div{ color: aqua; font-size: 30px; background: plum;}p{ color: gold; font-size: 9px; border: 2px dashed greenyellow;}.html文件中编写网页内容及引用index.css文件,代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的外部样式</title> <!--引用外部的样式--> <link rel="stylesheet" href="CSS/index.css"></head><body> <div>我也是容器标签</div> <div>我也是容器标签</div> <div>我也是容器标签</div> <div>我也是容器标签</div> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p> <p>我也是段落标签</p></body></html>
<link rel = “stylesheet” href = “index.css”>
href 用来链接一个文件 rel: 关系
1 0
- 初学HTML5--CSS样式(一)
- 初学HTML5--CSS样式(二)
- 初学HTML5--CSS样式(三)
- 初学HTML5--CSS样式(四)
- 初学HTML5--CSS样式小技巧
- 初学HTML5-第二课 CSS样式
- css样式(一)
- CSS样式(一)
- CSS样式(一)
- HTML5基础加强css样式篇(css属性border详解(一))(三十三)
- css初学笔记(一)
- html5-css样式
- HTML5-css样式分类
- html5-03 CSS样式
- react native 样式初学~(一)
- 蓝鸥零基础学习HTML5之CSS的基础样式一
- css样式*语法(一)
- bootstrap css样式(一)
- 数据结构实验之二叉树五:层序遍历
- 2016/08/08
- 链队列
- 【SHOI2011】bzoj2342 双倍回文
- 数据预处理的一些方法
- 初学HTML5--CSS样式(一)
- org.springframework.dao.InvalidDataAccessApiUsageException: The given object has a null identifi异常处理
- Android View中getViewTreeObserver().addOnGlobalLayoutListener()
- 计蒜客 简单图论(并查集+枚举)
- pageRank入门
- POJ 1745 / UVa 10036 Divisibility (同余定理,DP,经典题目)
- 3346数据结构实验之二叉树七:叶子问题
- 线性表链式存储
- hdu1573 同余方程