带你玩转JavaWed开发之二-CSS从基础到实战

最新推荐文章于 2023-12-25 22:54:17 发布

学丽

最新推荐文章于 2023-12-25 22:54:17 发布

阅读量478

点赞数

分类专栏： Java web 文章标签： css html cascading

本文链接：https://blog.csdn.net/gxl_1314520/article/details/53356406

版权

Java 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

web

11 篇文章 0 订阅

订阅专栏

一,什么是CSS?

Cascading Style Sheets层叠样式表

层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用
样式表:就是css属性样式的集合

CSS的作用

1. 对html页面进行美化和修饰
2. 将html的内容和样式进行了分离,让文档看起来更清晰
3. 提高代码复用性

1. CSS的选择器(三种)

一,基本选择器(三种)

1.ID选择器


(1)id选择器  id唯一性
        语法：#id的值{css属性}
            #ID{
                  属性名称:属性的值
               }
        示例：
            <div id="div1">hello css1!!!</div>
            <div id="div2">hello css2!!!</div>
            <style type="text/css">
                #div1{background-color: red;}
                #div2{background-color: pink;}
            </style>

2.类选择器


(2)class选择器
        语法：.class的值{css属性}
            格式:
                .类名{
                    属性名称:属性的值
                }
        示例：
            <div class="style1">div1</div>
            <div class="style1">div2</div>
            <div class="style2">div3</div>
            <style type="text/css">
                .style1{background-color: red}
                .style2{background-color: pink}
            </style>

3.元素选择器

(3)元素选择器
        语法：html标签名{css属性}
            格式:
              元素(标签名称){
                   属性名称:属性的值
              }
        示例：
            <span>hello css!!!</span>
            <style type="text/css">
                span{color:red;font-size:100px; }
            </style>

二,属性选择器

语法：基本选择器[属性=‘属性值’]{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>

三,伪元素选择器

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>

四,层级选择器

语法：父级选择器 子级选择器 .....
        示例：
            <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>

2. CSS的引入方式(三种)

1.行内样式

内嵌样式是把css的代码嵌入到html标签中
            <div style="color:red;font-size: 100px;">你好啊 小朋友</div>
            语法：
                (1)使用style属性将样式嵌入到html标签中
                (2)属性的写法：属性：属性值
                (3)多个属性之间使用分号;隔开
            不建议使用

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)多个属性之间使用分号;隔开

优先级:ID选择器>类选择器>元素选择器

三,css属性

文字属性

font-size:大小
font-family:字体类型

文本属性

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>

背景属性

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;
    }

列表属性

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>

尺寸属性

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>

显示属性

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>

浮动属性(float)

    <div style="width:400px;height: 400px;border: 1px solid red;">
            <div style="width: 100px;float: left;background-color:blue; height: 100px;border: 1px solid blue;"></div>
            <div style="clear: both;"></div>
            <div style="width: 110px;background-color:yellow;height: 100px;border: 1px solid yellow;"></div>
            <div style="width: 120px;background-color:green;height: 100px;border: 1px solid green;"></div>
        </div>
float:
        属性值：left  right
                clear:清除浮动 left right both
        缺点： (1)影响相邻元素不能正常显示
                (2)影响父元素不能正常显示
text-decoration-none去掉下划线

四,盒子模型

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:单独设置

学丽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带你玩转JavaWed开发之二-CSS从基础到实战

CSS: Cascading Style Sheets层叠样式表层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用样式表:就是css属性样式的集合CSS的作用1. 对html页面进行美化和修饰2. 将html的内容和样式进行了分离,让文档看起来更清晰3. 提高代码复用性1. CSS的选择器(三种)一,基本选
复制链接

扫一扫