2>.布局
2.CSS与 HTML的结合方式1> style属性在标签上加入style属性. 属性的值就是css代码.如：<p style="color:red;" >HelloWord</p>2> style标签在页面的head标签中, 书写一个style标签.在style标签中书写css代码.如：<style type="text/css">p {color:blue;}3> link标签引入在页面head标签中填写link标签<link type="text/css" rel="stylesheet" href="p.css" />type mime类型rel 类型href css文件路径
3.CSS的 选择器1>标签选择器语法: 标签名 {属性键:属性值;}如：<style type="text/css">p{color：red;}</style><p>HelloWorld</P>2>ID选择器id作为唯一标识,要唯一语法: #ID {属性键:属性值;}如：#one{color:red;}<p id="one">HelleWorld</p>3>class选择器class属性可以随意重复.语法: .CLASS名称 {属性键:属性值;}如: .one{color:red;}<p class="one">HelleWorld</p><h1 class="one">HelleWorld</h1>
4>选择器分组语法: 选择器1,选择器2...... {属性键:属性值;}<style type="text/css">.one,#two {color:yellow;}</style><p class="one" >HelleWorld</p><p id="two" >HelleWorld</p><p>HelleWorld</p><p class="one" >HelleWorld</p><h1 class="one" >HelleWorld</h1>5>伪类选择器指的是选择的某个标签的 某种状态常见状态有4种,a标签最全.l link 没有点击过的状态v visited 访问过h hover 鼠标悬浮a active 激活状态(鼠标点下去没有弹起)如：<style type="text/css">a:link {color:red;}a:visited {color:green;}a:hover {color:blue;}a:active {color:yellow;}</style><a href="HelloWorld.html" >01-结合方式01.html</a>
4.CSS的基本语法选择器 {属性键:属性值;属性键:属性值1 属性值2 ....;}如：1、字体p {font-size: 100px;font-family: 黑体;font-style: italic;font-weight: 900;font-variant: small-caps;}同：font :italic small-caps 900 100px 黑体;2、背景body {background-color: pink;background-image: url("001.jpg");background-repeat: no-repeat;background-attachment: fixed;}同：background : green url("001.jpg") no-repeat fixed center; 3、注释:与java中多行注释相同/* 注释内容 */5.CSS的常用属性 单位:(了解)颜色单位 Color Units #RRGGBB rgb ( R,G,B ) Color Name 长度单位 Length Units em ex px像素(常用) pt pc in cm mm 单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc 属性:color ==> 文字颜色font-family ==> 文字样式font-size ==> 文字大小font-style => 文字样式(斜体..)font-weight => 文字加粗font-variant => 异性字6.盒子模型1、典型标签：块级标签: 占的是一行.行内标签: 占行内的一部分. 不能嵌套 块级标签.块级: <div> <p> <ol> 行内: <span> <font> <a>2、div嵌套：<style type="text/css">div{border-color: red;border-width: 1px;border-style: solid;}#one{width: 200px;height: 300px;/*内边距:注意,内边距会改变自身的宽高.*/padding-left: 100px;}#two{width: 100px;height: 100px;/*外边距margin-left: 100px;}</style><div id="one"><div id="two"></div></div>3、内外边距的4个复合属性：<style type="text/css">div{/*border-color: red;border-width: 1px;border-style: solid;*/border: 1px solid red;width: 100px;height: 100px;}#one{/*1个属性时: 4个方向.2个属性时: 第一个属性决定上下 第2个决定左右3个属性时: 上 左右 下4个属性时: 上 右 下 左(顺时针)*/padding: 10px 30px 50px 80px;}</style>新闻热点
疑难解答
