CSS笔记[狂神版]

1、CSS

如何学习

1.css是什么
2.css怎么用(快速入门)
3.css选择器(重点 + 难点)
4.美化网页(文字,阴影,超链接,列表,渐变)
5.盒子模型
6.浮动
7.定位
8.网页动画(特效效果)

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)

1.2、发展史

css1.0
css2.0 DIV(块) + CSS,HTML与CSS结构分离的思想,网页变得很简单,SEO
css2.1 浮动,定位
css3.0 圆角,阴影,动画… 浏览器兼容性~
练习格式:
CSS笔记[狂神版]_第1张图片

1.3、快速入门

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    
    <style>
        h1{
     
            color: red;
        }
    style>
head>
<body>
<h1>我是标题吗h1>
body>
html>

css的优势
1、内容和表现分离
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!

1.4、CSS的3种导入方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    
    <style>
        h1{
     
            color: goldenrod;
        }
    style>
    
    
    <link rel="stylesheet" href="css/style.css">
head>
<body>


<h1 style="color: aqua">标题是我h1>
body>
html>

拓展:外部样式两种写法

  • 链接式:
    html
    
    <link rel="stylesheet" href="css/style.css">
    
  • 导入式:
    css2.1 特有的
    
    <style>
        /*@import url("css/style.css");*/
        @import "css/style.css";
    style>
    

2、选择器

作用:选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器:选择一类标签 标签{}

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /* 标签选择器,会选择到页面上所有的这个标签的元素 */
        h1{
     
            color: #a123a1;
        }
        p{
     
            font-size: 80px;
        

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