css 层叠样式表（1.1 css基础选择， 1.2 css基本样式）

最新推荐文章于 2021-12-03 16:00:28 发布

叶萝莉

最新推荐文章于 2021-12-03 16:00:28 发布

阅读量569

点赞数

分类专栏：前端h5 文章标签： css

本文链接：https://blog.csdn.net/weixin_43283797/article/details/83660364

版权

前端h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css 层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

1.1：css基础选择：
(派生选择器、id选择器、类选择器、属性选择器)
1.2：css基本样式：
(背景、文本、链接、列表、表格、轮廓)
1.3：css盒子模型：
(概述、内边距、边框、外边距、外边距合并、盒子模型应用)
1.4：css定位：
(定位、浮动、浮动的应用)
1.5：css选择器
1.6：css常用操作：
(对齐、分类、导航栏、图片)
1.7：网页实例

1.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <link href="css选择器.css", rel="stylesheet">
</head>
<body>
    <p><strong>加重文字。我不在li标签中</strong></p>
    <strong>第二行，加重文字。我不在li标签中</strong>
    <p>
        <ul>
        <li><strong>数学，我是li标签下的strong标签</strong></li>
            <li>英语</li>
        </ul>
    </p>
    <p id="aaa" name="aaa">id选择器</p>
    <p class="chapter">第一章 class选择器</p>
    <p class="chapter">第二章</p>
    <p class="chapter">第三章</p>

    <p name="bbb" title="提示文字">属性选择器</p>
    <p>属性选择器</p>

</body>
</html>

/* css选择器.css   标签选择器 */
body{
    background-color:aquamarine;
    }
p, body, a{
     /* 多个标签逗号分隔 */
    }
/* 派生选择器  空格表示层级*/
p strong{
    color:blueviolet;
    font-size:50px;
}
ul li strong{
    color:brown;
}

/* id 选择器*/
#aaa{
    color:blue;
    font-size:small;
}
/* 类选择器 */
.chapter{
    color:chocolate; 
}   
/* 属性选择器 */
[title="提示文字"]{
    color:darkblue;
}

代码效果如图：
在这里插入图片描述
派生选择器：主要表现层级，适应不太精确情况。经常与id、class选择器配合
id选择器：适合唯一准确的情况，个人测试比较方便
class类选择器：适合一组类似内容的标签。
属性选择器：多种选择器可以混合使用

1.2. css基本样式：
(背景、文本、链接、列表、表格、轮廓)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用语法：背景和文字</title>
    <link href="css常用语法：背景和文字.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p>Python学习</p>

    <p align="center">查看颜色</p>
    <h1>标题查看颜色</h1>

    <p>
        第一行<br>
        第二行<br>
        第三行
    </p>
    <br>
    
</body>
</html>

|css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

属性	描述
background-attachment (固定 fixed)	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置背景颜色
background-image	把图片设置为背景
background-position	设置背景图片的起始位置
background-repeat	设置背景图片是否可重复
background-origin	规定背景图片的地位区域
background-clip	规定背景的绘制区域

no-repeat 表示不能重复，repeat 可重复，repeat-x 表示x轴重复，repeat-y 表示y轴重复

body{
    background-color:aquamarine;
    background-image:url('萌.jpg');
    background-repeat:no-repeat;
    background-position:center;
    /*background-attachment:fixed;*/
    background-size:50%;
}
p{
    font-family:"Microsoft YaHei", sans-serif;
    color:aqua;
    font-size:15px;
    text-align:center;
    tab-index:10px;
    /* 字体重度  阴影  文本装饰*/
    font-weight:bold;
    text-shadow:5px 1px 6px #F93;
    text-decoration:underline;
}

代码效果如图：
在这里插入图片描述
CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐元素中的文本
text-decoration	向文本添加修饰取消下划线
text-indent	缩进元素中文本的首行
text-transform	元素中的字母
unicode-bidi	设置文本方向
white-space	元素中空白的处理方式
word-spacing	字间距

在 CSS 的链接属性设置中，我们能设置 color, font-family, background 等等，不同的状态我们可以设置对应的样式。

– 链接的四种状态：
a:link --普通的、未被访问的链接
a:visited --用户已访问的链接
a:hover --鼠标指针位于链接的上方
a:active --链接被点击的时刻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css链接</title>
    <link href="练习.css" rel="stylesheet" type="text/css">
</head>
<body>

    <a href="http://www.baidu.com">百度</a>
</body>
</html>

在这里插入图片描述
我们来看下效果：
未被访问的颜色链接：

已被访问的链接颜色：

鼠标指针移动链接上的颜色：

正在被点击的链接颜色：

css列表类型：列表有无序，有序之分，无序列表又可以用不同的标记来区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css列表</title>
    <link href="练习.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul class="circle"> 
    <!-- ul标签：unorder list 无序列表 -->
        <li>小圆圈无序列表</li>
        <li>小圆圈无序列表</li>
    </ul>
    <ul class="square">
        <li>正方形列表</li>
        <li>正方形列表</li>
    </ul>  
    <!-- ol标签：order list 有序列表 -->
    <ol class="upper-roman">
        <li>I II III有序列表</li>
        <li>I II III有序列表</li>
    </ol>
    <ol class="lower-alpha">
        <li>ABC列表</li>
        <li>ABC列表</li>
    </ol>

</body>
</html>

在CSS文件中添加：

ul.circle{ list-style-type: circle}
ul.square{ list-style-type: square}
ol.upper-roman{list-style-type: upper-roman}
ol.lower-alpha{list-style-type: lower-alpha}

下面是我们的结果：
在这里插入图片描述
css表格：
我们主要了解以下属性：
border-collapse — 设置是否把表格边框合并为单一的边框
border-spacing — 设置分隔单元格边框的距离
caption-side — 设置表格标题的位置
empty-cells — 设置是否显示表格中的空单元格
table-layout — 设置显示单元、行、列的算法

<table id="tb">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>number</th>
        </tr>
        <tr>
            <td>li</td>
            <td>3</td>
            <td>6</td>
        </tr>

        <tr class="tr2">
            <td>li</td>
            <td>4</td>
            <td>7</td>
        </tr>
        <tr>
            <td>li</td>
            <td>5</td>
            <td>8</td>
        </tr>
        <tr class="tr2">
            <td>li</td>
            <td>6</td>
            <td>9</td>
        </tr>
    </table>

这是无边框的效果，我们可以在css中加入边框并指定颜色(外边框和内边框)

#tb, tr, th, td{ border: 1px solid green;}

效果：
在这里插入图片描述上面是默认属性，我们可以通过css来定制列表。
先使用border-collapse 让整个列表边框合并为单线，
再使用width，height来定制表格大小，
之后用background-color 加上背景颜色，text-align 设置字符对齐方式，padding 设置内边距；
添加到CSS的代码：
在这里插入图片描述
代码效果如图：
css轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：
outline 在一个声明中设置所有的轮廓属性。
outline-color 轮廓的颜色
outline-style 轮廓样式
outline-width 轮廓宽度
在原来的html中加入两个p标签：

 <p id="p1"> 轮廓1233</p>
 <p id="p2"> 轮廓1233</p>

然后css中加入这几个属性的具体设置

#p1{
    outline-color: green;
    outline-style: groove;
    outline-width: 10px;
}
#p2{
    outline-color: blue;
    outline-style: dotted;
    outline-width: 5px;
}

代码效果如下：
在这里插入图片描述

叶萝莉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 层叠样式表（1.1 css基础选择， 1.2 css基本样式）

css 层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。1.1：css基础选择：(派生选择器、id选择器、类选择器、属性选择器)1.2：css基本样式：(背景、文本、链接、列表、表格、轮廓)1.3：css盒子模型：(概述、内边距、边框、外边距、外边距合并、盒子模型应用)1....
复制链接

扫一扫