CSS样式

采用web标准目的： 将内容与样式分离
web标准

　　结构标准 html5 表现标准 css 行为标准 js
css应用方式
　　1.内联样式表 将样式直接写入标签 <p style="color:red" /> 应用于一个标签

　　2.嵌入式样式表 使用标签嵌入到head当中 <style type = "text/css"/> 应用于一类标签

　　3.外部链接式样式表将样式表放到一个独立的css文件里边在head标签内用link标签使用该css样式
　　  <link href="main.css" rel="stylesheet" type="text/css" />

　　4.导入式样式表 不推荐 可以将多个样式表导入到一个css文件中然后在html中link这个css文件
　　  <style type="text/css">@import url("style.css") </style>
css控制元素状态--伪类
　　a:link {/*链接原始显示样式*/
　　text-decoration: none;
　　color: #aaaaaa;
　　}
css选择符
　　1.标签选择符： 针对html标签
　　input {
　　100px;
　　height: 30px;
　　border: 2px solid gold;
　　line-height: 30px;
　　vertical-align: middle;
　　}
　　2.id选择符： 针对页面中只出现一次的内容 用id
　　#spanId2 {
　　vertical-align: sub;/*下标 super 上标*/
　　}
　　3.类选择符： 针对相同的元素同样的样式 重复的样式
　　input:focus {
　　background: pink;
　　}
　　4.*通配符
　　*{margin：0；padding:0;}使用效率最低
　　5.选择符的嵌套使用 包含选择符 父元素 子元素 {属性：值}优化了css代码 无需要单独加ID
　　p strong {
　　font-size: 24px;
　　}
　　#p_id strong { 通过id的子元素添加样式
　　font-size: 24px;
　　}
　　6.选择符分组 将具有相同样式的选择符写到一起
　　h1, h2, h3,......#p_id strong {font-size:15px;}

css内联元素
　　宽高值不起作用 a em span
　　将块状元素转化成内联元素
　　display:inline
　　将内联元素转化成块状元素
　　display:block

css布局
　　默认文档流布局 按html结构顺序
　　浮动布局 float属性 将独占一行的属性取消 允许其他元素与其一行就是将原来的文档流中分离出来后面的对象就视为不存在
　　如果想让多个块元素显示在同一行里面则使用相同的浮动方向
　　clear： both；清除浮动 参数both，left， right
　　定为布局 position属性

　　左右两个块添加一个父盒子解决浏览器窗口缩小导致布局错乱的情况
　　当父元素没有指定高度并且它的子元素有浮动时父元素高度不会自动增加
　　给父元素增加一个空的标签并且添加class clear：both;
　　或者给父元素添加overflow：hidden
　　使用绝对定位
　　必须给父元素添加定为属性 position：relative；
　　给子元素添加绝对定为属性 position：absolute；
相对定为与绝对定位
　　绝对定位是以父元素为基准进行定位会脱离文档流
　　相对定位根据自身为基准点离开原来位置但是还占据文档流
清除浮动 after伪对象
　　.g_clr::after {
　　clear: both;
　　content: " ";
　　display: block;
　　height: 0;
　　visibility: hidden;
　　}

 CSS样式

div, ul, li { /*由于各个浏览器存在这不同的内外边距 因此要将内外边距从零开始计算*/
    padding: 0;
    margin: 0;
}

h1 {
    width: 1000px;
    height: 50px;
    font-size: 15px;
    background: #ccc;
    line-height: 50px; /*行高等于height时使得文字正好居中 缺点是不能换行只能一行*/
}

p {
    line-height: 150%;
}

li {
    font-size: 18px;
    font-weight: bold;
    list-style: none; /*去掉li前面的点*/
}

h2 {
    font-weight: normal; /*是否加粗字体*/
    font-size: 18px;
}

.blue {
    background: blue;
}

/*为main单独定义的一个类*/

#p {
    text-decoration: underline; /*是否有下划线*/
}

.indent {
    text-indent: 2em; /*缩进2字*/
    text-align: left; /*对齐方式*/
    white-space: pre; /*保留原先文本格式不使用br也可以换行*/
    text-transform: uppercase; /*大小写转换    capitalize 首字母大写 lowercase 全部小写*/
}

#span2 {
    vertical-align: sub; /*下标  super 上标*/
}

input {
    width: 100px;
    height: 30px;
    border: 2px solid gold;
    line-height: 30px;
    vertical-align: middle;
}

input:focus {
    background: pink;
}

p strong {
    font-size: 24px;
}

/*链接样式*/

a:link { /*链接原始显示样式*/
    text-decoration: none; /*去掉链接下划线*/
    color: #aaaaaa; /*改变字体颜色*/
}

a:visited { /*访问之后的显示样式*/
    color: lightseagreen;
}

a:hover { /*鼠标经过显示样式*/
    text-decoration: underline;
    color: green;
}

a:active { /*鼠标按下显示样式*/
    text-decoration: line-through;
    color: blue;
}

/*div样式
内容 content
    填充 padding 内边距 内补丁
    边框 border
    边界 margin 外边距 外补丁
    盒子模型的宽度：
    左边界-左边框-左填充-内容-右填充-右边框-右边界
    只有一个参数时意思是上右下左四个方向都为这个像素点
    俩个参数代表上下，左右
    三个参数 代表 上 左右 下
    margin：100px auto 0 居中
    如果参数不够则去对面找
    使用外边距时要考虑到浏览器的兼容性加上边框border可以解决问题
    由于各个浏览器存在这不同的内外边距 因此要将内外边距从零开始计算
    用到哪些元素就将哪些元素的padding margin设置o
    margin：0;
    padding：0;
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {
    margin: 0;
    padding: 0;
}
*/
#bigBox {
    width: 600px;
    height: 180px;
    background: #ccc;
    /*padding: 10px 0px 0px 10px; 上右下左顺时针现在bigBox的宽短就是300+10=310px*/
    border: 1px solid blue;
    float: left;
}

#smallBox {
    width: 100px;
    height: 100px;
    background: pink;
    /*margin-left: 10px;
    margin-bottom: 10px;*/
    padding: 5px;
    border: 5px solid blue;
    margin: 20px;
    float: left;

}

#smallBox1 {
    width: 100px;
    height: 100px;
    background: green;
    padding: 5px;
    border: 5px solid blue;
    margin: 20px;
    float: left;

}

#divImg {
    padding: 5px;
    border: 5px solid blue;
    margin: 20px;
    float: right;
}

/*换图css精灵效果*/

#bigBox a {
    width: 128px;
    height: 128px;
    display: block;
    background: url("img_file/search.png");

    /*background-position: 0 0; 可以再一张图片上指定像素位置来改变图片*/
}

#bigBox a:hover {
    background: url("img_file/search1.png");
}

#ulImg {
    width: 900px;
    height: 135px;
    background: green;
    margin: 20px; /*外补丁*/
    list-style: none;

}

#ulImg li { /*使用float使得li元素向上飘从而使得所有li进入一行当中*/
    float: left;
}

/*博客div布局*/
#fatherDiv {
    width: 200px;
    height: 200px;
    background: #cccccc;
}

.clear {
    clear: both;
}

#top {
    width: 200px;
    height: 50px;
    background: #69ff83;
    clear: both;
}

#fatherDivSmall {
    width: 200px;
    height: 200px;
    background: #000;
}

#left {
    width: 100px;
    height: 200px;
    background: green;
    float: left;

}

#right {
    width: 100px;
    height: 200px;
    background: red;
    float: right;

}

#footer {
    height: 30px;
    width: 200px;
    background: blue;

}

/*              */

　　html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <link href="css_file/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<script type="text/javascript">
    //alert("这是js脚本！");
    //当网页加载完成后执行的操作
    window.onload = function () {
        //先获取id main的元素
        var main = document.getElementById('main');
        //当鼠标经过main时为main加上blue这个样式
        main.onmouseover = function () {
            this.className = "blue"
        };
        //当鼠标移走还原原来的样式
        main.onmouseout = function () {
            this.className = ""
        }
    };
</script>
<a href="">WHAT</a>
<a href="">ARE</a>
<a href="">YOU</a>
<a href="">DOING</a>
<h1 id="main">
    EditPlus - Windows text editor with FTP and sftp</h1>
<p id="p" class="indent">
    Welcome to EditPlus text editor home page!
    Welcome to EditPlus text editor home page!
</p><br/>
<label>UserName：</label><input type="text"><br/>
<label>PassWord：</label><input type="password"><br/>
<ul>
    <li>Click here to Buy Now</li>
    <li>Download EditPlus Text Editor 4.3 (2017-05-12)</li>
    <li> Latest Bug Patch <strong>File</strong> - 4.3 patch build 2427 (2017-10-03) New!</li>
</ul>
<div>
    EditPlus IconEditPlus is a Windows text <strong>editor</strong> with built-in FTP (also FTPS) and sftp capabilities.
    While it can
    serve
    as a good Notepad replacement,
</div>
<h2>
    将h2的粗体还原it also offers many powerful features for Web page <strong>authors</strong> and programmers.
</h2>
<p>
    it also offers many powerful features for Web page <strong>Web page</strong> and programmers.
</p>
<p>X<span id="span2">2</span>:将DIV与LIST进行平铺使用浮动布局</p>
<div id="bigBox">

    <div id="smallBox">
        小盒子模型小盒子模型小盒子模型
    </div>
    <div id="smallBox1">
        小盒子模型2
    </div>
    <div id="divImg">
        <a href="#">css精灵</a>
    </div>

</div>
<div id="top">上</div>
<div id="fatherDiv">

    <div id="fatherDivSmall">
        <div id="left">左</div>
        <div id="right">右</div>
        <div class="clear"></div>
    </div>
</div>
<div id="footer">下(博客布局)</div>

<ul id="ulImg">
    <li><img src="css_file/img_file/search.png"></li>
    <li><img src="css_file/img_file/search1.png"></li>
    <li><img src="css_file/img_file/search.png"></li>
    <li><img src="css_file/img_file/search1.png"></li>
    <li><img src="css_file/img_file/search.png"></li>
    <li><img src="css_file/img_file/search1.png"></li>


</ul>

</body>
</html>