前端系列之CSS(选择样式)

前端系列之CSS(选择样式)_第1张图片

什么是CSS?
——CSS层叠样式表(Cascading Style Sheets)
——用于定义HTML内容在浏览器内的显示样式

——CSS简化HTML相关标签,网页体积小,下载快
——解决内容与表现分离的问题
——更好的维护网页,提高工作效率

一.CSS3基本语法

前端系列之CSS(选择样式)_第2张图片

前端系列之CSS(选择样式)_第3张图片

前端系列之CSS(选择样式)_第4张图片

前端系列之CSS(选择样式)_第5张图片

前端系列之CSS(选择样式)_第6张图片

注:实际开发中推荐使用外部样式表


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css使用方法title>
    
    <style type="text/css">

        /**/
            /**/
        /**/

        /*4导入样式*/
        @import "css.css";
    style>

    
    
head>
<body>

<h1>CSS使用方法h1>
<hr>


<p style="color: red;font-size: 20px;">行内样式p>


<p>嵌入样式p>


<p>外部样式p>


<p>导入样式p>
body>
html>

前端系列之CSS(选择样式)_第7张图片

二.CSS选择器

前端系列之CSS(选择样式)_第8张图片

前端系列之CSS(选择样式)_第9张图片

前端系列之CSS(选择样式)_第10张图片

前端系列之CSS(选择样式)_第11张图片

前端系列之CSS(选择样式)_第12张图片

前端系列之CSS(选择样式)_第13张图片

前端系列之CSS(选择样式)_第14张图片

前端系列之CSS(选择样式)_第15张图片

前端系列之CSS(选择样式)_第16张图片

伪类

前端系列之CSS(选择样式)_第17张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器title>
    <style type="text/css">
        a:link{color: blue;} /*未访问状态*/
        a:visited{color: gray;} /*已访问状态*/
        a:hover{color: green;}  /*鼠标悬浮状态*/
        a:active{color: orange;}  /*激活状态*/
    style>
head>
<body>
  <a href="http://www.baidu.com" target="_blank">css使用方法a>
body>
html>

前端系列之CSS(选择样式)_第18张图片

前端系列之CSS(选择样式)_第19张图片

前端系列之CSS(选择样式)_第20张图片

三.CSS继承,层叠,优先级

前端系列之CSS(选择样式)_第21张图片

注意:不是所有属性都可以继承

前端系列之CSS(选择样式)_第22张图片

前端系列之CSS(选择样式)_第23张图片

前端系列之CSS(选择样式)_第24张图片

前端系列之CSS(选择样式)_第25张图片

前端系列之CSS(选择样式)_第26张图片

前端系列之CSS(选择样式)_第27张图片

四.CSS应用

前端系列之CSS(选择样式)_第28张图片

前端系列之CSS(选择样式)_第29张图片

前端系列之CSS(选择样式)_第30张图片

前端系列之CSS(选择样式)_第31张图片

前端系列之CSS(选择样式)_第32张图片

你可能感兴趣的:(前端)