CSS基础样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 选择器优先级 */
    div{
        font-size: 20px;
        color: antiquewhite;
    }
    #demo{
        font-size: 40px;
        color: brown;
    }
    .one{
        font-size: 30px;
        color: aquamarine;
    }
</style>

<body>
    <div class="one" id="demo">学习css基本选择器</div>
</body>
</html>

三、网页中引入css样式

1.内联（行内）样式

html中的所有标签都有style属性，在style属性中直接写入css样式。

示例：

这是内联样式

</div>

2.内部样式表

将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

3.外部样式表

将css样式单独写入到一个 xxx.css外部文件中。

（1）使用link标签引入外部css文件。

（2）使用@import导入外部css文件。

4.link标签引入外部样式文件

声明外部样式表：rel=“stylesheet”

引入的文件类型：type=“text/css”

引入的文件地址：href=”style.css“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/demo.css">

<body>
    <p>学习css外部样式表</p>
    <h1 class="test">学习css外部样式表</h1>
    <h1 id="one">学习css外部样式表</h1>
    <div style="color: rgb(153, 16, 128);font-size: 20px;">学习css行内样式</div>
</body>
</html>

5.CSS样式优先级

内联样式的优先级最高。

同一个标签中使用三种方式引入CSS样式，浏览器会优先执行内联样式。

内部样式表的优先级居中。

外部样式表的优先级最低。

四、字体样式

字体风格	font-style	normal 默认值，标准文档样式 italic 斜体
字体粗细	font-weight	bold 定义粗体字符 100-900 定义由细到粗的字符
字体大小	font-size	像素：px
字体类型	font-family	“隶书” “楷体” 其他

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        font-family: "楷体";
        font-size: 80px;
        font-weight: 900;
        font-style: italic;
        /* font:italic 500 200px "楷体"; */
    }
</style>
<body>
    <div>学习css字体样式</div>
</body>
</html>

五、文本样式

color 设置文本颜色

red

#362596

rgb(32,250,50)

text-align 设置元素水平对齐方式

• left

• center

• right

text-indent 设置首行文本的缩进

line-height 设置文本的行高

text-decoration 设置文本的装饰

• none: 默认，标准文本

• underline：定义文本下划线

• overline：定义文本上划线

• line-through：定义穿过文本的一条线

六、鼠标样式

defalut 默认光标

pointer 超链接指针

wait 等待状态

help 指示可用的帮助

text 指示文档

crosshair 鼠标呈现十字状

七、背景样式

背景颜色

background-color

• red

• #536256

• rgb(30,250,13)

背景图片地址

background-image:url(图片路径)

• 图片绝对路径

• 图片相对路径

背景重复方式

background-repeat

• no-repeat 不重复

• repeat-x 水平重复

• repeat-y 垂直重复

• repeat 默认重复

背景定位

background-position

• 像素： px

• 水平方向： left 、 center 、 right

• 垂直方向： top 、 center 、 bottom

背景样式简写

• 网页开发中比较常用

• 属性值之间没有先后顺序

background：图片地址，图片重复方式，背景颜色，背景定位

八、列表样式

网页中的大部分内容都是使用列表制作的。

比如：网站导航栏，网页左侧菜单栏，网页底部信息栏，商品展示栏等。

list-style-type

（1）无序列表

disc 实体圆心（默认）

circle 空心圆

square 实体方心

none 无列表标记

（2）有序列表

1 / a / A / i / I

list-style-image

自定义列表标记为图片

属性值：url(图片路径)

list-style-position

列表标记定位

outside

inside

列表样式简写：list-style

列表标记属性

自定义列表标记图片

列表标记定位

九、CSS伪类

单击访问前	单击访问后	鼠标悬浮其上	单击未释放
link	visited	hover	active

CSS 伪类用于向某些选择器添加特殊的效果。

伪类，顾名思义就是假的，不存在的类，不是由class=""定义的，但元素可以具有同样的一些属性，比如鼠标悬停，那么此时就可以使用伪类，由浏览器指定它一个类，比如a:hover，效果近似于class="hover"，因为可以多次使用，所以叫伪类而不是伪ID，还有就是伪类通常是动态产生的，临时的，并非常驻属性。

十、CSS练习之美团左侧菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        background-color:#2FAFB5;
        width: 260px;
    }
    .one{
        height: 60px;
        font-size: 20px;
        color: white;
        text-indent: 20px;
        font-weight: 400;
        background-color: #28BEAC;
        line-height: 60px;

    }
    .two{
        text-indent: 35px;
        line-height: 40px;
        cursor: pointer;
        background: url(./美团箭头.png) no-repeat 230px center;
    }
    .three{
        text-decoration: none;
        color: white;
    }
    .three:hover{
        color: rgb(194, 0, 0);
    }
    .two:hover{
        background: antiquewhite url(./美团箭头.png) no-repeat 230px center;
    }
</style>
<body>
    <div>
        <h1 class="one">全部分类</h1>
        <ul>
            <a href="#"><li class="two"> <a href="#" class="three">美食</a> </li></a> 
            <li class="two"> <a href="#" class="three">外卖</a> </li>
            <li class="two"> <a href="#" class="three">酒店</a> </li>
            <li class="two"> <a href="#" class="three">榛果名宿</a> </li>
            <li class="two"> <a href="#" class="three">猫眼电影</a> </li>
            <li class="two"> <a href="#" class="three">机票/火车票</a> </li>
            <li class="two"> <a href="#" class="three">休闲娱乐/KTV</a> </li>
            <li class="two"> <a href="#" class="three">美食</a> </li>
            <li class="two"> <a href="#" class="three">外卖</a> </li>
            <li class="two"> <a href="#" class="three">酒店</a> </li>
            <li class="two"> <a href="#" class="three">榛果名宿</a> </li>
            <li class="two"> <a href="#" class="three">猫眼电影</a> </li>
            <li class="two"> <a href="#" class="three">机票/火车票</a> </li>
            <li class="two"> <a href="#" class="three">休闲娱乐/KTV</a> </li>
        </ul>
    </div>
</body>
</html>

效果图

猿究◎小飞

关注

47
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS基础样式

CSS基础样式一、css语法规范二、CSS选择器1.类（class）选择器2.id选择器3.CSS选择器优先级三、网页中引入css样式1.内联（行内）样式2.内部样式表3.外部样式表4.link标签引入外部样式文件编辑5.CSS样式优先级四、字体样式五、文本样式六、鼠标样式七、背景样式八、列表样式九、CSS伪类十、CSS练习之美团左侧菜单栏...
复制链接

扫一扫