CSS入门

CSS基础

CSS样式文件结构

background-color:red;

font-size:20px;

}

样式选择器（p是标签选择器），html所有标签都可以作为样式选择器

选择器里面为属性和属性值

type=”text/css”表示标签里面的内容为文本或者CSS

定义CSS的两种方式：
内联样式方式、外联样式方式
内联样式方式：<p style="color:lightcoral;font-weight:bolder;" ></p>
内联方式设置样式只对当前标签有效， 内容与表现高耦合

CSS选择器

作用：用来选择（找到）需要添加样式的位置

常用选择器：标签选择器、（归）类选择器

<p class="title">https//www.feihong.me/<p>
<p>Feihong's Blog</p>
<p class="title">飞鸿的博客/<p>

CSS样式设置

外部样式表

外部样式表就是新建一个文档，里面全写CSS，然后再通过link插入到html代码中

作用：使网页的表示层与结构层彻底分离

示例：将背景设置，修改为外部样式表

<link rel="stylesheet"  type="text/css"  href="index.css">

出了link还可以用其他方法引入样式表

CSS设置文本样式

CSS设置字体样式

字体
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定字体的粗细

CSS设置列表样式

列表的属性
list-style 用于把所有用于列表的属性设置于一个声明中
list-style-image 把图像设置为列表项标志
list-style -type 设置列表项标志的类型

编程练习

用list-style符合属性实现下面的效果

小星星的图片地址为：http://climg.mukewang.com/58dc9e4e0001ba9000160016.png

任务

（1）定义四个列表选项

（2）小星星图标作为列表样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
        /*此处写代码*/
        ul{
            list-style-image:url(http://climg.mukewang.com/58dc9e4e0001ba9000160016.png);
        }
</style>
</head>
<body>
<!-- 此处代码 -->
    <ul>
        <li>电视</li>
        <li>冰箱</li>
        <li>洗衣机</li>
        <li>空调</li>
    </ul>
</body>
</html>

CSS的伪类

伪类：
主要用于标签。
a:link – 链接的样式
a:hover – 鼠标悬停的样式
a:active – 点击时的样式
a:visited – 访问过后的样式

伪类分类

伪类包含两种：状态伪类和结构性伪类

CSS的伪元素

伪元素：
::before 为当前元素创建一个排在第一位的子元素。例q::before{ content:"<";}，会把页面中的引用标签<q>创建伪元素，把默认加的双引号变为<;
::after 为当前元素创建一个排在最后一位的子元素。例q::after {content:">";}，会把页面中的引用标签<q>创建伪元素，把默认加的双引号变为>;