2.CSS基础知识

2.1.CSS概述

CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。用于页面布局。

前端设计中，html用于内容，css用于表现，javascript用于交互。

表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息，css文件存储样式

css易于维护和改版，只要修改CSS文件就可以重新设计整个网站的页面。

2.2.css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div { width:100px; height:100px; color:red }

2.3 css页面应用

css页面应用有3种方式

2.3.1 内联式

<body>中通过标签的style属性，在标签上直接写样式。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

特点：仅作用于本标签

2.3.2 嵌入式

在<head>中通过style标签，写入在网页上创建嵌入的样式表。在<body>中通过style定义的标签引用。

<html>

<head>

<style>

div {

color: brown;

width: 800px;

height: 100px;

}

</style>

</head>

<body>

<div>hello word</div>

</body>

</html>

特点：作用于当前整个页面

2.3.3 外联式

通过link标签，链接到外部样式表到页面中。

<html>

<head>

</head>

<body>

<div>

你好

</div>

</body>

</html>

css文件style.css

div {

color: rgb(42, 165, 81);

width: 800px;

height: 100px;

}

特点：作用于整个网站，工作常用这种方式。

注意:优先级：内联式 > 嵌入式 > 外联式

当样式冲突时，就是采用就近原则，是指css属性离被修饰的内容最近的为主。若没有样式冲突则采用叠加效果。

2.4 css文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;

font-size 设置文字的大小，如：font-size:12px;

font-family 设置文字的字体，如：font-family:'微软雅黑'; windows下存放字体的路径为：C:\Windows\Fonts

font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 'normal' :正常。

font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗（相当于数字值700） font-weight:normal 设置不加粗（相当于数字值400）。

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';

line-height 设置文字的行高，如：line-height:24px;

text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉，underline下画线，line-through贯穿线

text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中，一般有：left center right

text-shadow: 文本的文字是否有阴影及模糊效果 text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur：可选。模糊的距离。

Color：可选。阴影的颜色

演示代码

html文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

文本属性-段落标签

</p>

<a href="">下划线的去除</a>

<ul>

<li>文字的模糊</li>

</ul>

<div>div 文本属性演示</div>

</body>

</html>

style.css文件内容

color:red;

text-indent:30px;

text-align:center;

text-decoration:line-through;

/*每个单词的间距*/

word-spacing:30px;

/*每个字母的间距*/

letter-spacing:2px;

/*direction:ltr;*/

width:200px;

height:30px;

background:green;

/*处理空白不换行*/

white-space:nowrap;

/*多余的文字以...结束*/

text-overflow:ellipsis;

/*当前的元素溢出元素框的时候*/

overflow:hidden;

}

text-decoration:none;

}

ul li{

text-shadow:0px 0px 3px #ff0000;

font-size:35px;

line-height:20px;

}

div{

color: blue;

text-align: left;

background-color: black;

font-size: 72px;

}

2.5 css选择器

2.5.1 标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}

div{color:red}

2.5.2 id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red}

2.5.3 类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.red{color:red}

.big{font-size:20px}

.mt10{margin-top:10px}

2.5.4 层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

.box span{color:red}

.box .red{color:pink}

.red{color:red}

</div>

2.5.5 组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

.box1,.box2,.box3{width:100px;height:100px}

.box1{background:red}

.box2{background:pink}

.box2{background:gold}

3.5.6 伪类及伪元素选择器

常用的伪类选择器有hover，active等表示鼠标悬浮在元素上时的状态，伪元素选择器很多，它们可以通过样式在元素中实现不同的效果。

a:link {color: #FF0000}/* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

a:active {color: #0000FF}/* 选定的链接 */

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FOR的伪类</title>
    <style>
        a:link {color:#000000;}         /* 未访问链接*/
        a:visited {color:#00FF00;}      /* 已访问链接 */
        a:hover {color:#FF00FF;}        /* 鼠标移动到链接上 */
        a:active {color:#0000FF;}       /* 鼠标点击时 */
    </style>
</head>
<body>
<p><b><a href="1.html" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本属性</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1">box1 类选择器</div>
<div class="box2">box2 类选择器</div>
<div class="box3">box3类选择器</div>
</body>
</html>

Style.css

.box1{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: red;
    margin-top: 50px;
    transition: all 0.6s;
    /*设置鼠标小手*/
    cursor: pointer;
}
.box1:hover{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: green;
    margin-top: 50px;
    /*添加圆角边框*/
    border-radius: 50%;
    /*变化时间*/
    /*transition: all 0.6s;*/
}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}

2.6 CSS盒子模型

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
        solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
        solid #000;padding: 50px;}
    </style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>

posted @ 2022-06-21 21:15 人生几何几何阅读(54) 评论(0) 收藏举报

刷新页面返回顶部

2.CSS基础知识

2.5.1 标签选择器

2.5.2 id选择器

2.5.3 类选择器

2.5.4 层级选择器

2.5.5 组选择器

3.5.6 伪类及伪元素选择器

公告