WEB篇二 CSS

css笔记
一、css的简介
1、什么是css
1.层叠样式表，css是对html进行样式修饰语言
2.层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
样式表：就是css属性样式的集合
2、css的作用
(1)修饰html的 使其html样式更加好看
(2)提高样式代码的复用性
(3)html的内容与样式相分离 便于后期维护

3、css的引入方式和书写规范    (1)内嵌样式        内嵌样式是把css的代码嵌入到html标签中        <div style="color:red;font-size: 100px;">你好啊 小朋友</div>        语法：            (1)使用style属性将样式嵌入到html标签中            (2)属性的写法：属性：属性值            (3)多个属性之间使用分号;隔开           （4）开发时不建议使用    (2)内部样式        在head标签中使用style标签进行css的引入        <style type="text/css">            div{color:red;font-size: 100px;}        </style>        语法：            (1)使用style标签进行css的引入                <style type="text/css">                    属性：type：告知浏览器使用css解析器去解析            (2)属性的写法：属性：属性值            (3)多个属性之间使用分号;隔开    (3)外部样式        将css样式抽取成一个单独css文件 谁去使用谁就引用        <link rel="stylesheet" type="text/css" href="demo1.css"/>        语法：            (1)创建css文件 将css属性写在css文件中            (2)在head中使用link标签进行引入                <link rel="stylesheet" type="text/css" href="css文件地址"/>                rel:代表要引入的文件与html的关系                type：告知浏览器使用css解析器去解析                href：css文件地址            (3)属性的写法：属性：属性值            (4)多个属性之间使用分号;隔开    (4)@import方式        <style type="text/css">            @import url("css地址");        </style>        link与@import方式的区别：            (1)link所有浏览器都支持 import部分低版本IE不支持            (2)import方式是等待html加载完毕之后在加载            (3)import方式不支持js的动态修改 /最关键的/

二、css选择器
1、基本选择器
(1)元素选择器
语法：html标签名{css属性}
示例：
hello css!!!

span{color:red;font-size:100px; }

(2)id选择器 id唯一性
语法：#id的值{css属性}
示例：

hello css1!!!

hello css2!!!

#div1{background-color: red;}
#div2{background-color: pink;}

(3)class选择器
语法：.class的值{css属性}
示例：

div1

div2

div3

.style1{background-color: red}
.style2{background-color: pink}

    ***选择器的优先级：id>class>元素2、属性选择器    语法：基本选择器[属性=‘属性值’]{css属性}    示例：        <form action="">            name:<input type="text" /><br/>            pass:<input type="password" /><br/>        </form>        <style type="text/css">            input[type='text']{background-color: yellow}            input[type='password']{background-color: pink}        </style>    3、伪元素选择器    a标签的伪元素选择器        语法：            静止状态    a:link{css属性}            悬浮状态    a:hover{css属性}            触发状态    a:active{css属性}            完成状态    a:visited{css属性}        示例：            <a href="#">点击我吧</a>            <style type="text/css">                a:link{color:blue}                a:hover{color:red}                a:active{color:yellow}                a:visited{color:green}            </style>    4、层级选择器    语法：父级选择器 子级选择器 .....    示例：        <div id="d1">            <div class="dd1">                <span>span1-1</span>            </div>            <div class="dd2">                <span>span1-2</span>            </div>        </div>        <div id="d2">            <div class="dd1">                <span>span1-1</span>            </div>            <div class="dd2">                <span>span1-2</span>            </div>        </div>        <style type="text/css">            #d1 .dd2 span{color:red}        </style>

三、css属性

1、文字属性    font-size:大小    font-family:字体类型        2、文本属性    color:颜色    text-decoration:下划线        属性值：none    underline       text-align:对齐方式        属性值：left  center  right        <div>hello css!!!</div>        <a href="#">click me!!!</a>        <style type="text/css">            div{color:red;text-decoration: underline;text-align: right }            a{text-decoration: none;}        </style>3、背景属性    background-color:背景颜色    background-image:背景图片        属性值：url("图片地址");    background-repeat:平铺方式        属性值：默认横向纵向平铺                repeat:横向纵向平铺                no-repeat:不平铺                repeat-y：纵向                repeat-x：横向    body{        background-color: black;        background-image: url("images/dog.gif");        background-repeat: repeat-y;    }4、列表属性    list-style-type:列表项前的小标志        属性值：太多了    list-style-image:列表项前的小图片        属性值：url("图片地址");        <ul>            <li>黑马程序员</li>            <li>黑马程序员</li>            <li>黑马程序员</li>            <li>黑马程序员</li>        </ul>        <style type="text/css">            /* ul{list-style-type: decimal-leading-zero;} */            ul{list-style-image: url("images/forward.gif");}        </style>5、尺寸属性      width:宽度    height:高度        <div id="d1">div1</div>        <div id="d2">div2</div>        <style type="text/css">            #d1{background-color: red;width: 200px;height: 200px;}            #d2{background-color: pink;width: 200px;height: 200px;}        </style>6、显示属性    display:        属性值：none:隐藏                block:块级显示                inline：行级显示        <form action="">            name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>            <br>            pass:<input id="pass" type="password" />            <br>            <input id="btn" type="button" value="button" />        </form>        <style type="text/css">            span{color:red;display: none}        </style>        <script type="text/javascript">            document.getElementById("btn").onclick = function(){                document.getElementById("span").style.display = "inline";            };        </script>7、浮动属性    float:        属性值：left  right                clear:清除浮动 left right both        缺点： (1)影响相邻元素不能正常显示                (2)影响父元素不能正常显示

四、css盒子模型
border:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型

    border-top:上边框    border-bottom:下边框    border-left:左边框    border-right:右边框padding:    代表边框内壁与内部元素之间的距离    padding:10px;代表上下左右都是10px    padding:1px 2px 3px 4px;上右下左    padding:1px 2px;上下/左右    padding:1px 2px 3px;    padding-top:单独设置margin:    代表边框外壁与其他元素之间的距离    margin:10px;代表上下左右都是10px    margin:1px 2px 3px 4px;上右下左    margin:1px 2px;上下/左右    margin:1px 2px 3px;    margin-top:单独设置