CSS的学习笔记

clownwithoutmask

已于 2022-10-28 20:18:23 修改

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： css 学习前端

于 2022-10-27 22:00:16 首次发布

本文链接：https://blog.csdn.net/clownwithoutmask/article/details/127470870

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

什么是CSS？

1.1.CSS是什么？
2.CSS怎么使用？
3.CSS选择器（重点+难点）
4.美化页面
5.盒子模型
6.浮动
7.定位

1.1、什么是CSS？

Cascading Style Sheet层叠级联样式表
CSS：表现层

1.2、CSS发展史

CSS1.0加了一些最基本的样式，加粗之类
CSS2.0 div(块元素) css提出来结构和表现分离的思想，使网页变的跟简单
CSS2.1浮动定位
CSS3.0圆角阴影动画…浏览器的兼容性~~有些浏览器是不支持动画。

1.3、快速入门

<!DOCTYPE html>
<html>
   <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
规范：在style标签里面编写CSS代码，每一个声明都需要使用;
结尾语法：
选择器{
    声明1;
    声明2;
    声明3;
    }
*/
h1{color:aqua;}
</style>
  </head>
   <body>
       <h1>helloworld</h1>
   </body>
</html>
注意：Style可以写在别的位置，但是最好写在head标签里面

建议使用这种规范

CSS
优势：
1.内容和表现分离正常情况下HTML代码很少CSS代码却很多。CSS代码很容易就成千上万行所有的代码都写在HTML里面，你的网页加载很慢
2.网页结构统一，可以实现复用
3.样式丰富
4.建议使用独立于HTML以外的CSS文件

1.4.CSS的三种独立导入方式

<1>内部，内联样式
内部样式（优点：可以复用代码）

<html>
    <head>
        <title></title>
        <style>
            h1{ width: 30;background-color: red;}
        </style>
    </head>
    <body>
        <h1>你好</h1>
    </body>
</html>

内联样式

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1 style="width: 30;background-color:red">你好</h1>
    </body>
</html>

<2>外部样式

<! DOCTYPE html>
<html>
   <head>
<meta charset="utf-8">
<title></title>
<!--外部样式-->
<link rel="stylesheet"type="text/css"href="css/style.css"/>
</head>
   <body>
      <h1>hello world</h1>
   </body>
</html>
/*外部样式*/
h1{
color:red;
}

拓展：外部样式的两种写法

链接式
html

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

rel：指定资源跟页面的关系

导入式CSS2.1

<!--导入式-->
<style type="text/css">
@importurl("css/style.css");
</style>

<3>行内样式（内联）

<!DOCTYPEhtml>
<html>
  <head>
       <meta charset="utf-8">
       <title></title>
  </head>
    <body>
     <h1 style="color:chocolate;">helloworld</h1>
  </body>
</html>

三种样式的优先级：
理论上：行内>内部>外部
真实情况:就近原则

CSS中的颜色表示法

单词表示法：red blue…
十六进制表示法：#000000黑色#ffffff白色…
RGB三原色表示法（取值范围0~255）：rgb（0,0，0）黑色（255,255,255）白色

CSS背景样式

background-color背景颜色
background-image背景图片
url（图片地址）默认会水平垂直铺满背景块
background-repeat背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都平铺，默认）
norepeat不平铺
如果图片小于块容量图片默认放在左上角，大于块容量的话，只会在块中显示部分图片
background-position背景图片的位置
x，y： 100px，30px；
x:left，center，right
y:top，center，bottom
用百分比也可以
background-attachment背景图片随滚动条的移动方式
scroll：图片随滚动条滚动（默认）（图片所在位置以块为标准）
fixed：图片不随滚动条滚动（此时图片所在位置是以网页为标准的）

CSS边框样式

border-style:边框的样式
solid实线
dashed虚线
dotted点线
border-width边框的大小
px…
border-color边框的颜色
注：针对每一条单独设置

<html>
    <head>
        <head></head>
        <style>
            div{ width: 300;height: 300;border-style: dashed;border-color: red;border-width: 30px;}
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

如果要只设置一条边在border-right-style:dashed;
透明颜色 transparent（与背景色相契合）

CSS文字样式

font-family:字体类型
英文字体：Arial…(针对中文不起作用 )
中文字体:微软雅黑(默认)，楷体，宋体…（对中英文都起作用）
中文字体的英文名称：
微软雅黑：MicrosoftYaHei
宋体：SimSun

<html>
    <head>
        <title></title>
        <style>
div{
   font-family: Arial,宋体，微软雅黑;
}
        </style>
    </head>
    <body>
        <div>你好</div>
    </body>
</html>

注：

在设置字体时为了避免电脑中没有对应的字体，一般会设置多种字体按照从前到后的顺序进行选择，假如电脑中都没有相应字体则会以电脑默认字体输出。
引号的问题：字体中没有空格就不用加引号，有空格就必须加（‘Time New Roman’）

衬线体（宋体）和非衬线体（微软雅黑）

注：左侧为衬线体，右侧为非衬线体
3. 字体大小
font-size(默认大小为16px)

<html>
    <head>
        <title></title>
        <style>
div{
   font-size: 20px;
}
        </style>
    </head>
    <body>
        <div>你好</div>
    </body>
</html>

4. 字体粗细：font-weight
模式：正常和加粗两种
写法：单词（normal ，bold）数字（100~900）
注：100_{500都是正常大小，600}900是加粗的，输入数字为100的整数倍

5. 字体样式：font-style
模式：正常（normal）和倾斜（italic）两种
写法：单词（normal ，italic）
注：oblique也表示倾斜，但用的比较少
区别：italic：带有倾斜属性字体才可以设置倾斜
oblique：没有倾斜属性字体也可以设置倾斜

段落样式

1. text-decoration:文本装饰
下划线：underline
上划线：overline
删除线：line-through
无任何装饰：none
注：可以添加多个文本修饰，空格隔开

<html>
    <head>
        <title></title>
        <style>
p{
   text-decoration: underline;
}
        </style>
    </head>
    <body>
        <p>你好</p>
    </body>
</html>

2. 文本大小写：text-transform(针对英文段落)
小写：lowercase
大写：uppercase
只对首字母大写：capitalize

<html>
    <head>
        <title></title>
        <style>
p{
   text-transform: lowercase;
}
        </style>
    </head>
    <body>
        <p>difnddfmdkHBBIHUHkg</p>
    </body>
</html>

3. 文本缩进：text-indent（首行缩进）
em单位，这是一个相对单位，1em永远跟字体大小相同
注：缩进的文本内容中有英文的话可能会导致对齐错误

<html>
    <head>
        <title></title>
        <style>
p{
   text-indent:1em ;font-size: 16px;
}
        </style>
    </head>
    <body>
        <p>你好</p>
    </body>
</html>

4. 文本对齐方式text-anlign
对齐方式：left，right，center，justify（两端对齐）

<html>
    <head>
        <title></title>
        <style>
p{
   text-align: justify;
}
        </style>
    </head>
    <body>
        <p>你好</p>
    </body>
</html>

行高：line-height=上边距+下边距+字体高度
默认行高：不是固定的，根据字体大小不断变化。
取值：1.numbei（px）
2.scale（比例值，跟字体大小成比例）

<html>
    <head>
        <title></title>
        <style>
p{
 line-height: 2;
}
        </style>
    </head>
    <body>
        <p>你好</p>
    </body>
</html>

定义字间距：letter-spacing
定义词间距：word-spacing（针对英文）
英文和数字不自动折行的问题
work-break:break-all(非常强烈的折行)
work-wrap-break-word(不那么强烈的折行，可能会产生一些空白区域)

<html>
    <head>
        <title></title>
        <style>
p{
 line-height: 2;
}
        </style>
    </head>
    <body>
        <p>你好</p>
    </body>
</html>

复合样式

一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多个样式，叫做复合样式
复合样式
写法：通过空格的方式实现
复合写法有的不要关心写法顺序（background border），有的需要
例：

background
border
font（最少两个值）
weight style size family
style weight size family
weight style size/line-height family

<html>
    <head>
        <title></title>
        <style>
div{
    width: 300px ;height: 300px;
background :red  no-repeat center center;
border-right:blue dashed 2px ;
font:bold italic 30px 宋体;
}
        </style>
    </head>
    <body>
        <div>你好</div>
    </body>
</html>

注：尽量不要混写，非要混写，先写复合样式，再写单一样式，避免被覆盖

选择器

作用：选择页面上的某一个或则某一类标签

2.1基本选择器

<1>标签选择器
标签名{}

<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
会选择这个页面所有的这个标签的元素
*/
h1{color:#FFA500;}
p{color:aqua;}
</style>
</head>
<body>
<h1>hello world</h1>
<p>11111</p>
<p>22222</p>
<p>33333</p>
</body>
</html>

<2>类选择器
class名称{}

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style
type="text/css">
/*
类选择器可以多个标签归类，同一个class可以实现复用，也可以跨标签使用
*/
.one{color:chartreuse;font-size:20px;}
</style>
</head>
<body>
<h1 class="one">hello world</h1>
<pclass="one">11111</p>
<pclass="one">22222</p>
<p>33333</p>
</body>
</html>

<3>id选择器
id名称{}

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
id选择器:必须保证全局唯一，不能出现同名的
*/
#one{color:#FFA500;}
#two{color:aquamarine;}
</style>
</head>
<body>
<h1 id="one">hello world</h1>
<p>11111</p>
<p id="two">22222</p>
<p>33333</p>
</body>
</html>

<4>三种基本选择器的优先级
id选择器>类选择器>标签选择器

2.2层次选择器

1. 后代选择器：

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
type="text/css">
/*后代选择器中间有一个空格*/
/*选中ul下的所有p标签*/
ul p{background:green;}
  </style>
</head>
<body>
<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>
</body>
</html>

2. 子代选择器

<! DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title></title>
       <style>
type="text/css">
/*子代选择器中间是一个>符号，只能选中下一代*/
/*选中body子代的p标签*/
body>p{background:green;}
       </style>
  </head>
  <body>
       <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>
     </body>
</html>

3. 兄弟选择器

<! DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
<title></title>
   <style>
         type="text/css">
/*兄弟选择器：对下不对上*/
#one+p{background:aqua;}
   </style>
      </head>
  <body>
      <p>p1</p>
      <p id="one">p2</p>
      <p>p3</p>
<ul>
   <li>
      <p>p4</p>
   </li>
   <li>
      <p>p5</p>
   </li>
   <li>
      <p>p6</p>
   </li>
</ul>
      <p>p7</p>
</body>
</html>

4. 通用选择器

<! DOCTYPE html>
<html>
     <head>
     <meta
charset="utf-8">
<title></title>
      <style>
       type="text/css">
/*通用选择器:当前选中元素向下的所有兄弟元素*/
        #one~p{background:aqua;}
      </style>
     </head>
   <body>
      <p>p1</p>
      <p id="one">p2</p>
      <p>p3</p>
      <p>p3.5</p>
<ul>
   <li>
      <p>p4</p>
   </li>
   <li>
      <p>p5</p>
   </li>
   <li>
      <p>p6</p>
   </li>
</ul>
      <p>p7</p>
      <p>p8</p>
</body>
</html>

2.3结构伪类选择器

<! DOCTYPE html>
<html>
     <head>
     <meta charset="utf-8">
      <title></title>
      <style type="text/css">
/*不能使用class和id选择器*/
/*选中ul下的第一个子标签*/
      ul  li:first-child{
      background:#00FFFF;
      }
/*选中ul下的最后一个子标签*/
      ul li:last-child{
      background:#FF0000;
      }
/*高级的结构伪类选择器，不需要掌握，要个脸熟*/
/*选中p1:先定位到父级元素，选中父级元素下的第一个孩子顺序并且是当前元素才能*/
    p:nth-child(2){
     background:
     #b9e2fe;
    }
/*选中父元素下的第二个类型*/
    p:nth-of-type(1){
     background:
     #FFA500;
     }
      </style>
</head>
<body>
   <h1>hello</h1>
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
<ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>
</ul>
</body>
</html>

2.4属性选择器（常用）

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#FFA500;
text-align:center;
color:#b9e2fe;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*属性选择器的格式：选中存在id属性 标签[]{}*/
/*a[id]{
background:yellow;
}*/
/*选中id=first的元素*/
/*a[id=first]{
  background:#00FFFF;
}*/
/*选中class中含有links的元素*/
/*
a[class*="links"]{
background:
#FF0000;
}*/
/*选中以http开的元素*/
/*
a[href^=http]{
background:
#ddff7e;
}*/
/*选中以doc结尾的元素*/
a[href$=doc]{
background:
#f2fcfe;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com"
class="links item first"id="first">1</a>
<a href="https://www.4399.com"class="links item active">2</a>
<a href="123.html"class="links item">3</a>
<a href="123.jpg"class="links item">4</a>
<a href="123.png"class="links item">5</a>
<a href="abc"class=" item">6</a>
<a href="a.pdf"class="links item">7</a>
<a href="abc.pdf.class="linksi tem">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last"id="last">10</a>
</p>
</body>
</html>

3.美化页面

3.1为什么要美化页面?

有效的传递页面信息
吸引用户
凸显网页主题
-用于提高体验
span标签：
重点要突出的字，用span标签套起来

<! DOCTYPE html>
<html>
     <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .one{
        font-size:50px;
       }
      </style>
      </head>
<body>
莫等闲，白了少年头，<span class="one">空悲切</span>。
</body>
</html>

3.2字体样式

font-size:字体大小
font-famliy:字体
font-weight:字体粗细
color:字体颜色
font-style:字体风格
italic字体倾斜
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
body{
font-family:楷体;color:#FFA500;
}*/
h1{
color:#FF0000;
font-size:50px;
}
/*.p1{
font-weight:bolder;
}
.p2{
font-weight:bold;
}*/
/*font:字体风格 字体粗细 字体大小 字体*/
/*p{font:italic bolder 15px "楷体";}*/
</style>
</head>
<body>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>

3.3文本样式

1. 颜色

color:orange;
a、单词：red green blue pink
b、RGB0-F16进制 #FF0000红色 RGB(255,0,0)
c、RGBA A表示透明度 RGBA(255,0,0,0.5)；

2. 文本对齐方式
text-align:center;居左|居中|居右

3. 首行缩进

text-indent:2em;/*2em表示缩进两个字体*/

4. 行高

height:100px;
line-height:100px;
当你想行内容上下左右都居中，就把块高度和行高设置成一样的

5. 装饰

text-decoration:underline;下划线
text-decoration:line-through;中划线
text-decoration:overline;上划线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
color:red;
text-align:center;
background:orange;
height:100px;
line-height:100px;
text-decoration:underline;
}
.b{
/*color:#FF0000;*/
color:rgb(255,0,0);
text-decoration:line-through;
}
.c{
color:rgba(255,0,0,0.5);
text-decoration:overline;
}
.p1{
text-indent:2em;
/*2em表示缩进两个字体*/
}
</style>
</head>
<body>
<p class="a">11111111</p>
<p class="b">22222222</p>
<p class="c">33333333</p>
<h1>迪迦奥特曼</h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态
转化能力的奥特曼。</p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。</p>
</body>
</html>

3.4超伪类连接

a:link设置超链接在未被访问的样式
a:visited设置超链接在已被访问的样式
a:hover设置超链接在鼠标悬浮的样式
a:active设置超链接在鼠标点击的样式
注意：a:hover必须位于a:link和a:visited的后面
      a:active必须位于a：hover后面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration:none;
}
/*没有访问之前的样式*/
a:link{
color:black;
}
/*已被访问的样式*/
a:visited{
color:red;
}
/*鼠标悬浮状态*/
a:hover{
color:orange;
}
a:active{
color:#00FFFF;
}
</style>
</head>
<body>
<p><a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p>
<p><a href="#">JS从入门到入土</a></p>
</body>
</html>

3.5阴影

/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration:none;
color:#000000;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
.one{
text-shadow:red 2px -2px 1px;
}
</style>
</head>
<body>
<p> <a href="#">java从入门到放弃</a></p>
<p><a href="#">数据库从删库到跑路</a></p> 
<p class="one"><a href="#">99</a></p>
</body>
</html>

3.6列表样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#nav{
width:300px;
background:#cdcdcd;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:2em;
line-height:30px;
background-color:#FF0000;
}

ul{
background:#cdcdcd;
}
/*list-style：设置列表前的样式
  none去掉圆点
  circle空心圆
  decimal数字
  square正方形
  */
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000000;
}
a:hover{
color:orange;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="nav">
<h2 class="title">分类</h2>
<ul>
<li>
<a href="#">美妆</a>
<a href="#">
饰品</a>
<a href="#">洗护</a>
</li>
<li>
<a href="#">男装</a>
<a href="#">运动</a>
<a href="#">百货</a>
</li>
<li>
<a href="#">手机</a>
<a href="#">数码</a>
<a href="#">电器</a>
</li>
<li>
<a href="#">食品</a>
<a href="#">生鲜</a>
<a href="#">医药</a>
</li>
</ul>
</div>
</body>
</html>

3.7背景

background-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:800px;
height:600px;
border:10px
solidred;
background-image:url(img/44.png);
/*图片默认平铺*/
}
.div1{
background-repeat:repeat-x;/*水平平铺*/
}
.div2{
background-repeat:repeat-y;/*垂直平铺*/
}
.div3{
background-repeat:no-repeat;/*不平铺*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
</div>
</body>
</html>

4.盒子模型

布局必须遵循一个规范（盒子模型）
页面上所有的内容都是HTML标签组成的，每一个标签都有自己的特点
HTML里的标签可以分为三类：块级元素行内元素行内块元素

4.1什么盒子模型？

margin :外边距
border：边框
padding：内边距

4.2HTML标签分类

1. 块级元素

网页中类似于：p h1~h6 div
特点：

    1独占一行
     2.可以通过width/height设置大小
     3.默认的宽度是100%,高度是0
     4.可以这margin和padding

2. 行内元素

网页中类似的元素：a,span

特点：

1默认排列在一行
2行内元素不能设置width和heright,大小和内容大小一样
3行内元素如果想要实现居中，必须在父级元素上添加text-align:center;
行内元素添加text-align:center;
没有效果只能在父级元素（块元素）上设置
4行内元素的width和height默认为05设置marginpadding无效

3. 块级行内元素

具备块级元素和行内元素的特点：img

4.3边框

粗细 样式 颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:300px;
border:1px
solidblack;
text-align:center;
margin:0
auto;
}
h2{
font-size:14px;
background-color:#009E94;
line-height:30px;
margin:0;
}
form{
background-color:#009E94;
padding-bottom:20px;
}
/*border:粗细样式颜色*/
div:nth-of-type(1)>input{
border:2px solid red;
}
div:nth-of-type(2)>input{
border:2px dashed orange;
}
div:nth-of-type(3)>input{
border:2px
doubleblack;
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form action="#">
<div>
<span>账号</span>
<input type="text"/>
</div>
<div>
<span>密码</span>
<input type="text"/>
</div>
<div>
<span>邮箱</span>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>

clownwithoutmask

关注

0
点赞
踩
0

收藏

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

1.1.CSS是什么？2.CSS怎么使用？3.CSS选择器（重点+难点）4.美化页面5.盒子模型6.浮动7.定位Cascading Style Sheet层叠级联样式表CSS：表现层CSS1.0加了一些最基本的样式，加粗之类CSS2.0 div(块元素) css提出来结构和表现分离的思想，使网页变的跟简单CSS2.1浮动定位CSS3.0圆角阴影动画…浏览器的兼容性~~有些浏览器是不支持动画。建议使用这种规范CSS优势：1.内容和表现分离正常情况下HTML代码很少CSS代码却很多
复制链接

扫一扫