CSS

CSS

CSS基础

背景

单纯使用HTML实现页面有很多不方便的地方，样式代码和内容代码混杂，比较杂乱，不易于阅读，且无法实现更好的效果。HTML和CSS的分工明确，HTML只负责页面的内容，及内容代码，CSS负责页面的美化，即样式代码。

概念

CSS(Cascading Style Sheets)中文译为层叠样式表，样式即标签的外观部分，层叠指对一个元素多次设置同一个样式，这将使用最后一次设置的属性值，表指CSS的代码书写的表现形式类似于一张表。

使用

三种使用方式

  • 嵌入：利用标签自带的style属性来设置样式

  • 内联：在<head></head>中添加<style></style>来写CSS代码

  • 外联：创建一个以.css为后缀的文件，在文件中书写CSS代码，在HTML页面中的<head></head>中通过<link href="css文件路径">引入css文件

  • <img src="" style="css代码">

<style> css代码 </style>

<link href="css文件地址" />

CSS代码书写格式

CSS代码由选择器和属性构成，通过选择器定位需要设置样式的标签。

css选择器{
    css属性名1: 属性值1;
    css属性名2: 属性值2;
    css属性名3: 属性值3;
}

CSS注释

/* 注释 */

CSS基础属性

文字类

  • color：设置标签的文本颜色。

  • font-size：设置字体大小。默认是跟浏览器有关，一般为16px。

    • 常见问题：对于HTML内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的空格和换行在浏览器中会被解释为一个3px的空格，这是IE才会有的问题，将代码写在同一行即可。也可以给父标签设置font-size:0.如果子标签有文字，就单独给子标签设置font-size。

  • font-family：设置标签文字的字体类型，默认字体跟系统有关。

  • text-decoration：设置文本的样式。下划线(underline)、删除样式(none)、删除线(line-through)。

  • font-weight：设置标签文字的粗细程度。可以取数字100~900(整百), 可以使用normal、bold、bolder。

    font-weight:300  |bold |bolder

  • text-align：设置标签内部内容的对齐方式，有left、center、right。

  • line-height：设置行高。

  • @font-face：自定义字体

    /* 引入了字体，并且设置了该字体的名字 */
@font-face{
    font-family:"字体的名字",
    src:url("字体文件的路径")
}
/* 使用 */
p{
    font-family:"自定义字体名"
}
    • writing-mode:tb-rl;：文字竖向排列

尺寸类

  • wide：设置标签的宽度，以像素或百分比为单位
  • height：设置标签的高度，以像素或百分比为单位
  • border：设置标签的边框。需设置边框的宽度、边框的样式、边框的颜色
    • border:1px solid red ：1px的红色实线边框
    • border-left:2px dashed blue; ：单独设置左边框
    • border-right: 单独设置右边框
    • border-top: 单独设置上边框
    • border-bottom: 单独设置下边框
  • padding：内边距

背景

  • background-color：设置背景颜色

  • background-image：设置某个标签的背景图片

    background-image:url("图片路径")

  • background-size:cover：设置背景图片居中拉伸

  • background-position：设置背景图片的显示位置，分为x轴和y轴。默认坐标系原点是标签的左上角，x轴向右为正，y轴向下为正。

    • css sprite，一般翻译为雪碧图，将所有小图标集合在一张图片上，使用时调整尺寸坐标截取需要的图标，可以减少TCP连接数。
    background-position:0px 0px;
    • 背景图片居中
      • background-size: cover;：图片可能会被拉伸015
      • background-position: center;：图片尺寸不变，只是移动至正中间016

  • background-repeat：设置背景图片是否平铺，平铺(repeat)、不平铺(no-repeat)。

列表

  • list-style-type：设置每个列表项的图表样式，默认小圆点circle，也可设置为无样式none。

  • list-style-image：设置列表项的图标为指定的图片。

  • list-style-position：设置列表项图标的位置，默认为外部outside，也可设为内部inside，不能设置坐标。

  • list-style：快捷组合属性，可同时设置以上三个属性。

    list-style-image:url("图片地址");
list-style-position: inside;
list-style-type: lower-roman;
list-style:url("图片地址")  inside  lower-roman;
list-style:none;//没有图标

  • ul也有默认16px的margin以及40px的左padding，可使用pandging:none取消。

其他

  • margin:0 auto：特殊用法，其意为上下margin为0，左右margin为auto，可将某个标签相对页面水平居中，对块级元素作用，不作用于内容。

  • outline:none：取消浏览器默认边框，针对表单元素。

  • display：设置标签的显示模式，块级元素(block)、行内块级元素(inline-block)、行内元素(inline)、隐藏(none)。

    display:block;
display:inline-block;

  • vertical-align：用于设置行内元素的处置对齐方式，middle是居中。

    vertical-align:middle;

    • vertical-align和line-height之间的区别

      • 默认效果

        025

      • vertical-align：用于设置行内元素之间的垂直对齐方式，将其设置为middle可以实现行内元素之间居中对齐（一般是参考图片或表单元素）。效果：

        026

      • line-height：用于设置标签内部一行内容的垂直对齐，将其设置为标签的高度可以实现内部一行内容垂直居中。效果：

        027

  • cursor：

  • opacity：设置标签的透明度(0~1)。

  • color、font-size属性对标签以及其子标签都有效果

CSS基础选择器

标签选择器

会对页面上所有类型的标签设置样式

标签名{
    css属性名1: 属性值1;
}
/* 例如：页面所有的body设置背景颜色为黑色 */
body{
    background-color: black;
}

id选择器

能够单独对某个标签设置样式(同一页面不允许属性id相同)

#id属性值{
    css属性名1: 属性值1;
}
/* 例如：id属性为logo的标签设置其内容左对齐 */
#logo{
    text-align:left;
}

class选择器

对具有相同class属性的多个标签同时设置样式，适合页面上多个标签有同样的样式的情况。

.class属性值{
 css属性名1: 属性值1;
}
/* 例如：class属性为demo的所有标签设置文字颜色为白色 */
.demo{
    color:white;
}

示例

初步使用标签、id、class选择器及以上属性可实现不错的效果。

<!-- 省略 -->
<head>
    <!-- 省略 -->
    <style>
        body{
            background-image: url("images/bg.jpg");
        }
        table{
            margin: 0 auto;
            background-color: white;
            width: 700px;
            height: 515px;
            border: 1px solid #ccc;
        }
        input{
            width: 420px;
            height: 43px;
            padding: 0;
            border:1px solid  #ccc;
        }
        select{
            width: 420px;
            height: 43px;
            padding: 0;
            border:1px solid  #ccc;
        }
        td{
            font-size: 14px;
            color: rgb(83, 83, 83);
        }
        .td_right{
            text-align: right;
        }
        button{
            background-color: #ffaf4b;
            width: 70px;
            height: 30px;
        }
        a{
            color: gray;
        }
    </style>
</head>
<body>
    <form action="">
        <table >
            <tr>
                <th>随意表单</th>
            </tr>
            <tr>
                <td class="td_right">名称：</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td class="td_right">邮箱：</td>
                <td>
                    <input type="mail">
                </td>
            </tr>
            <tr>
                <td class="td_right">出生日期：</td>
                <td><input type="date"></td>
            </tr>
            <tr>
                <td class="td_right">城市：</td>
                <td>
                    <select>
                        <option value="">请选择你的城市</option>
                        <option value="">北京</option>
                        <option value="">上海</option>
                        <option value="">广州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td_right">你喜欢的颜色：</td>
                <td>
                    <input type="color">
                </td>
            </tr>
            <tr>
                <td class="td_right">手机号：</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button>注册</button>
                    已有帐号，<a href="#">立即登录</a>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
012

组合选择器

同时使用id、class、标签选择器中的一种或多种，利用标签的嵌套关系精确寻找需要设置样式的标签，可减少不必要的class代码。

/* 所有table标签里的a标签，字体颜色为白色 */
table a{
    color:white;
}
/* 找到所有ol标签下的li标签下的ul标签下的li标签(即有序列表的二级无序列表的项)，背景颜色为黄色 */
ol li ul li{
    background-color: yellow;
}

伪类选择器

根据用户鼠标行为改变标签样式

分类：

  • a:link：超链接专属，页面一打开超链接就有的样式，旧属性，一般不用。
  • a:visited：超链接专属，超链接被访问之后的样式。
  • :hover：鼠标悬停到标签上时标签的样式。
  • :active：鼠标点击标签不释放时标签的样式。
  • :focus：当标签获取鼠标焦点时标签的样式，比如点击输入框。

格式：

a:link{
    css属性名1: 属性值1;
}
a:visited{
    css属性名1: 属性值1;
}
非伪类选择器:hover{
    css属性名1: 属性值1;
}
非伪类选择器:active{
    css属性名1: 属性值1;
}
非伪类选择器:focus{
    css属性名1: 属性值1;
}

例子：

结合雪碧图可实现小图标鼠标悬停变色效果：

<!-- 省略 -->
<head>
    <!-- 省略 -->
    <style>
        p{
            width: 32px;
            height: 32px; 
            background-image: url("images/icon.png");
            background-repeat: no-repeat;
            background-position:0px 0px;
        }
        #item1:hover{
            background-position:0px -96px;
        }
        #item2{
            background-position: 0px -32px;
        }
        #item2:hover{
            background-position:0px -128px;
        }
        #item3{
            background-position: 0px -64px;
        }
        #item3:hover{
            background-position:0px -160px;
        }
    </style>
</head>
<body>
    <p id="item1"></p>
    <p id="item2"></p>
    <p id="item3"></p>
</body>
</html>
013

HTML标签显示模式

block：块级元素，指独占一行的标签：p、h、table、tr、ul、ol、dl、li、hr。

inline-block：行内块级元素，指同行显示，但可设置宽高的标签：input、textarea、select、button、img。

inline：行内元素，指可同行显示的标签，默认不可设置宽高的：a、span。

显示模式可通过display转换

结合伪类选择器、组合选择器调整显示模式可以实现二级菜单功能

  • 例如

    <head>
<!--省略-->
<style>
    ul{
        display: none;
    }
    ol li:hover ul{
        display: block;
    }
    ol li ul li:hover{
        background-color: yellow;
    }
</style>
</head>
<body>
    <ol>
        <li>
            第一项：子列表
            <ul>
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
            </ul>
        </li>
        <li>第二项</li>
    </ol>
    <p></p>
    <select>
        <option value=""></option>
    </select>
</body>
    014
posted @   AncilunKiang  阅读(46)  评论(0)  编辑  收藏  举报
相关博文：
· CSS记录
· CSS进阶
· CSS 个人笔记
· CSS简介
· 02_CSS
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示