day02HTML_CSS
2018-06-24 02:02:37来源:未知 阅读 ()
<form action="http://www.baidu.com" method="post"> ... </form>
-
了解CSS的概念
- 英文缩写 Cascading Style Sheet
- 层叠样式表
- 层叠:层层叠加
- 样式表:样式的集合(属性的集合),不是html的属性,而是CSS的属性
-
掌握CSS的引入方式(heml和css)
- 通过style标签的属性
<!--通过style属性--> <div style="border: 1px solid red;">div一</div>
- 通过style标签
<head> <!--通过style标签--> <style> div { border: 1px solid red; } </style> </head>
- 通过link标签结合(外部引入)
<link rel="stylesheet" href="../../css/divcss.css" />
- 通过style标签的属性
-
了解CSS的基本语法和常用的选择器
- 语法规范
{
属性:属性值 属性值
属性:属性值 属性值
}
-
- 常用选择器
- 标签选择器; 语法: 标签名{css代码}
<style> /*标签选择器*/ div{ border: 1px solid red; } </style>
- 类选择器语法: .类名{css代码}
<style> /*类选择器*/ .divClass{ border: 1px solid red; } </style>
- id选择器;语法: #id名{css代码}
<style> /*id选择器*/ #divId{ border: 1px red solid; } </style>
- 组合选择器 语法:选择器,选择器{css代码}
/*组合选择器*/ div,span{ border: 1px solid red; }
- 后代选择器 语法:选择器1 选择器2 {css 代码}
- 子代选择器 语法:选择器1>选择器2 {css 代码}:
- 标签选择器; 语法: 标签名{css代码}
- 常用选择器
-
了解CSS的盒子模型,浮动.
- 设置浮动
<div style="float:left;"></div>
- 设置浮动
- css盒子模型
- margin:外边距
- padding:内边距,里面的元素和边框之间的距离
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 300px; width: 300px ;border: red solid 1px;"> <div style="background-color: blue; height: 100px;text-decoration: underline; width: 100px; border-style: dashed; margin: 35px; padding: 20PX;"> BBB 中国 </div> </div> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:iframe的使用
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash