天天看点
返回

Day03CSS(1)

CSS(1)

1. 什么是CSS

一、 如何学习：

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

https://www.runoob.com/ 菜鸟教程

二、 是什么

Cascading Style sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

三、 发展史：

CSS1.0

CSS2.0 DIV(块) + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性

四、 快速入门

style

练习格式：

Day03CSS(1)

基本入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--规范，<style>可以编写css的代码，每一个声明，最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>

    <h1>我是标题</h1>
</body>
</html>

外部引用（建议使用）

Day03CSS(1)

五、 CSS的优势

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

六、 CSS的3种导入方式

内部、外部、行内

优先级：就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    <!--内部样式-->
        h1{
            color: green;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!--行内样式：在标签元素种，编写一个style属性，编写样式即可-->
    <h1 style="color:red;">我是标题</h1>

</body>
</html>

扩展：外部样式两种写法

链接式：html

导入式：css2.1 是特有的

<style>
    @import "css/style.css";
</style>

2. 选择器（一、四重要）

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

一、 基本选择器

  1. 标签选择器 标签{} 选择一类标签 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择页面上所有的标签*/
        h1{
            color: #1ea36e;
            background: #e2b192;
            border-radius:24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>好好学Java</h1>
<h1>好好学Java</h1>
<p>刚把爹哦</p>
</body>
</html>
Day03CSS(1)
  1. 类选择器 .class的名称{} 选择所有class一致的标签，跨标签 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式   .class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        .haha{
            color: #f6dcff;
        }
        .hahaha{
            color: #edffae;
        }
    </style>
</head>
<body>

<h1 class="haha">标题1</h1>
<h1 class="hahaha">标题2</h1>
<h1>标题3</h1>

<p class="haha">p标签</p>
</body>
</html>
Day03CSS(1)
  1. ID选择器 #id名称{} 唯一 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器  :id必须保证全局唯一！！！
        #id名称{}
        */
        #haha{
            color: red;
        }
        .style1{
            color: #4ccfff;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>

<h1 id="haha" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>
Day03CSS(1)

优先级：不遵循就近原则，固定的

id> class > 标签选择器

二、 层次选择器 （定位的时候比较方便） 

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
  1. 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你 
/*后代选择器*/
body p{
    background: green;
}
Day03CSS(1)
  1. 子选择器 一代 儿子 
body>p{
    background: aquamarine;
}
Day03CSS(1)
  1. 相邻兄弟选择器 同辈（向下） 
.active +p{
    background: #ff8cec;
}
           
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
Day03CSS(1)
  1. 通用兄弟选择器 当前选中元素向下所有兄弟元素 
.active~p{
    background: blueviolet;
}

代码同上

Day03CSS(1)

三、结构伪类选择器

结构： 定位元素 主要记住1、2 ，第4个比第3个要好用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class选择器-->
    <style>

        /*ul的第一个元素*/
        ul li:first-child{
            background: aquamarine;
        }

        /*ul的最后一个元素*/
        ul li:last-child{
            background: red;
        }
        /*选中p1:定位到父元素，选择当前的第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
        */
        p:nth-child(2){
            background: bisque;
        }
        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: yellow;
        }
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>
Day03CSS(1)

伪类： hover 鼠标悬停

</style>
  		a:hover{
            background: green;
        }
    </style>
</head>
<body>
<a href="">123321</a>
Day03CSS(1)

四、属性选择器（常用） 好用！把id和class结合了 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aqua;
            text-align: center;
            color: coral;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px Arial;
            line-height: 50px;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com/" class="links item first" id="first">1</a>
    <a href="http://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item active">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href=abc"">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="/abc.doc">8</a>
    <a href="/abcd.doc" class="links item last">8</a>

</p>
</body>
</html>
Day03CSS(1)

属性选择器格式：

/*属性名，  属性名=属性值（正则）
=   绝对等于
*=  包含  
^=  以这个开头
$=  以这个结尾
*/
/*存在id属性的元素    a[]{}  */
a[id]{
    background: yellow;
}
a[id=first]{
    background: beige;
}
Day03CSS(1)
/*class中有links的元素*/
a[class*="links"]{
    background: yellow;
}
Day03CSS(1)
/*选中href中以http开头的元素*/
a[href^=http]{
    background:yellowgreen;
}
Day03CSS(1)
a[href$=pdf]{
    background: crimson;
}

$= 以这个结尾

*/

a[id]{

background: yellow;

}

a[id=first]{

background: beige;

}

[外链图片转存中...(img-PXAOBX8x-1615950874466)]

```css
/*class中有links的元素*/
a[class*="links"]{
    background: yellow;
}

[外链图片转存中…(img-PZ9On9hd-1615950874466)]

/*选中href中以http开头的元素*/
a[href^=http]{
    background:yellowgreen;
}

[外链图片转存中…(img-lcHOlcaM-1615950874466)]

a[href$=pdf]{
    background: crimson;
}
Day03CSS(1)
狂神说java学习 html css
上一篇: JAVA成神之路-基础篇——常用jvm命令（一）javacjavap
下一篇: 【Leetcode】Min Stack

继续阅读