CSS学习笔记

-Thanx-

于 2021-10-21 20:11:53 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/qq_45776730/article/details/120846290

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS学习笔记

一、三种方式添加CSS
二、三种方式选择HTML
三、盒子模型
四、CSS定位

codepen.io学习网站

让<p>Lorem ipsum dolor sit amet</p>显示为红色

p{
	color:red;
}

color:property属性
red: value
p:selector选择器

一、三种方式添加CSS

1.外部样式表
- CSS保存在.css文件中
- 在HTML的head里使用<link>标签引用：

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>CSS Crash Course</title>
</head>

2.内部样式表
- 不使用外部CSS文件
- 将CSS放在HTML<style>里：

<body>
    <h1 style="color:red">Hello World!</h1>
    <p>Lorem ipsum dolor sit</p>
</body>

3.内联样式（不推荐）
- 仅影响一个元素
- 在 HTML元素的style属性中添加

二、三种方式选择HTML

1.通过标签选择：p标签
2.通过class类选择：选择类为.paragraph的HTML
3.通过id选择：# + id名称：#para1
在这里插入图片描述

id只能是唯一
CSS选择器介绍： https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

完整HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>CSS Crash Course</title>
</head>
<body>
    <div class="container">
        <div class="box1">
            <h1 style="color:red">Hello World!</h1>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
</body>
</html>

CSS代码如下：

.box1{
    background-color:antiquewhite;
}
.container{
    width:80%;/* 宽度 */
    margin:auto;/* 水平居中 */
}

效果图：
在这里插入图片描述

在这里插入图片描述关于颜色的两个网站参考：
关于字体：

字体网站：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

修改页面body:

/*修改页面颜色*/
body{
    background-color:black;/*底色*/
    color:white;/*字体颜色*/
    font-family:Arial,Helvetica,sans-serif;/*字体样式*/
    font-size:20px;/*字体大小*/
    font-weight:bold;/*字体粗细*/
    font-style:italic;
    /*可以缩减成一行代码：
    font:bold 20px italic Arial,Helvetica,sans-serif italic;
    */
}

在这里插入图片描述
给box1里面的h1做修改：

.box1 h1{
    text-decoration:underline;/*下划线*/
    text-transform:uppercase;/*全部大写*/
    letter-spacing:0.5em;/*字间距*/
    word-spacing:1em;/*词间距*/
    line-height:1em;/*行间距*/
}

在这里插入图片描述

三、盒子模型

在这里插入图片描述

margin:5px 10px 5px 10px按照上右下左的顺序

在这里插入图片描述

border边框属性

border:5px blue solid;/*让边框为蓝色*/

在这里插入图片描述

.box1{
    background-color:antiquewhite;
    color: royalblue;

    border-right:5px red solid;
    border-left:5px yellow solid;
    border-top:5px green solid;
    border-bottom:10px firebrick double;

}

在这里插入图片描述 border-bottom-width:8px单独修改某一处

padding内边距属性

    padding-top:100px;
    padding-bottom:100px;
    padding-left:100px;
    padding-right:100px;

在这里插入图片描述

margin外边距属性

margin-top:50px;

在这里插入图片描述

整体混合布局

.box2{
    border:5px dotted #cccccc;/*格式为点*/
    padding:20px;
    margin:20px 0;
    border-radius:35px;/*加圆角*/
}

在这里插入图片描述

List与url()方法的使用：
插入图片前：

<div class="list">
    <ul>
        <li>List_1</li>
        <li>List_2</li>
        <li>List_3</li>
        <li>List_4</li>
        <li>List_5</li>
    </ul>
</div>

在这里插入图片描述
使用url()插入图片后

.list li{
    list-style-image:url('../image/Windows.png');
}

在这里插入图片描述

button按钮的使用

<div class="box2">
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet</p>
    <button>Button</button>
</div>

button{/*静态显示*/
    background-color: black;
    color: white;
    padding:10px 15px;
}

button:hover{/*触碰显示*/
    background-color: white;
    color:black;
}

button:active{/*点击显示*/
    background-color:grey;
    color:white;
}

在这里插入图片描述

超链接 a Tag<a herf="#"></a>

<ul>
    <li>List_1</li><!--为区分a Tag-->
    <li>List_2</li>
    <li><a href="#">List_3</a></li>
    <li><a href="121.com">List_4</a></li>
    <li><a href="#">List_5</a></li>
</ul>

a{
    text-decoration:none;
    color: red;
}
a:hover{
    color:cyan;
}
a:visited{/*访问过后显示为blue*/
    color:blue;
}

在这里插入图片描述

float()

<div class="block">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="block">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="block">
    <p>Lorem ipsum dolor sit amet</p>
</div>

在这里插入图片描述

对指定list段落处理

.list2 li:nth-child(even){/*even偶数，对偶数list操作，奇数odd*/
    background-color: green;
    color:blue;
}
.list2 li:first-child{/*修改第一个list*/
    background-color:yellow;
    color:red;
}
.list2 li:nth-child(3){
    color:aqua;
}

在这里插入图片描述

一些快捷键
1.Tab+#+input()= id="input()"
2.Tab+input()=<input()></input()>
3.Tab+.+input()= class="input()"
注意事项

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

<div class="clearfix"></div>

clearfix{
    clear:both;
}

修改前：

<div id="main-block">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div id="sidebar">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list2">
    <ul>
        <li>List</li>
        <li>List</li>
        <li>List</li>
        <li>List</li>
        <li>List</li>
    </ul>
</div>

#main-block{
    float:left;
    width:70%;
    border:1px solid black;
    box-sizing:border-box;
}
#sidebar{
    float:right;
    width:30%;
    border:1px solid white;
    box-sizing:border-box;
}

在这里插入图片描述 - 修改后：

<div id="main-block">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div id="sidebar">
    <p>Lorem ipsum dolor sit amet</p>
</div>

<!--在这里插入clearfix-->
<div class="clearfix"></div>

<div class="list2">
    <ul>
        <li>List</li>
        <li>List</li>
        <li>List</li>
        <li>List</li>
        <li>List</li>
    </ul>
</div>

#main-block{
    float:left;
    width:70%;
    border:1px solid black;
    box-sizing:border-box;
}
#sidebar{
    float:right;
    width:30%;
    border:1px solid white;
    box-sizing:border-box;
}
.clearfix{
    clear:both;
}

在这里插入图片描述

四、CSS定位

在这里插入图片描述

这部分不是很懂，推荐网站https://developer.mozilla.org/en-US/docs/Learn/CSS
视频学习地址https://www.bilibili.com/video/BV1bW411R7hg

-Thanx-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

codepen.io学习网站让<p>Lorem ipsum dolor sit amet</p>显示为红色p{ color:red;}color:property属性red: valuep:selector选择器三种方式添加CSS外部样式表CSS保存在.css文件中在HTML的head里使用<link>标签引用：<head> <meta charset="UTF-8"> <link
复制链接

扫一扫