CSS

CSS入门

如何学习

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

什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位

基础语法

<!--规范，<style>可以编写css代码
语法：
选择器{声明1；声明2；
}            与html糅杂在一起的时候
-->
<style>h1{color: red;}</style>

 <link rel="stylesheet" href="css/style.css">用link方式导入css   推荐使用

css好处

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

CSS的三种导入方式

行内样式----内部样式----外部样式就近原则
在标签内写

林圣yu是憨八龟
通过stytle写内部样式

先呈现骨架后美观

选择器

作用：选择元素

基本选择器

ID选择器>class选择器>标签选择器

标签选择器

/*标签选择器，会选择到所有使用该标签*/h1{color: red;}p {color: aquamarine;}

类选择器 class

  <style>/*类选择器可以多个标签归类，同一个class，可以复用 .class名称*/.b1{color: aquamarine;}.b2{color: red;}</style>
</head>
<body>
<h1 class="b1">标题1</h1>
<h1 class="b2">标题2</h1>
<h1 class="b1">标题2</h1>

ID选择器

  <style>/*id选择器id全局唯一*/#hanpi{color: aquamarine;}</style>
</head>
<body>
<h1 id="hanpi" class="b1">标题1</h1>

高级选择器

后代选择器：在某个元素的后面
```
body p{background:red;
}
```
子选择器
```
body>p{    background:red;
}
```

相邻兄弟选择器

/*相邻弟选择器：只有一个，向下*/
.class+p{    background:red;
}

通用兄弟选择器

/*相邻兄弟选择器：全部，向下*/
.class~p{    background:red;
}

结构伪类选择器

a:hover{}

<style>/*ul的第一个子元素*/ul li:first-child {color: red;}ul li:last-child {color: aquamarine;}/*选中p1*//*选择当前p元素的父级元素，选中父级元素的第一个，并且当前元素才生效*/p:nth-child(1){color: blue;}/*选择当前p元素的父级元素，选中父级元素的第一个*/p:nth-of-type(2){color: darkgreen;}
</style>
<body>
<p>p1</p>
<p>p2<p>
<p>p3<p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zUpMezDt-1606562444668)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128103151687.png)]

属性原则器

a[属性名=属性值(可以用正则)]{}
=是绝对等于 *=是通配等于
```
^=以什么开头 $=以什么结尾
```

美化网页元素

span标签约定熟成突出重点用的

字体样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7TTMzfqf-1606562444671)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128114043198.png)]

文本样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YAISjKvY-1606562444673)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128120434588.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAcbrcE7-1606562444674)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128120459410.png)]

文本阴影和超链接伪类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZJ4nk3a-1606562444675)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128121910160.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GwWEPo5g-1606562444676)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128121936458.png)]

列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aY2YIiTS-1606562444678)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128124714332.png)]

背景颜色与背景图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtilt4jY-1606562444678)(C:\Users\wuvcky\AppData\Roaming\Typora\typora-user-images\image-20201128124956839.png)]

渐变

Grabient

盒子模型及边框使用

内外边距div居中

Day8学习日记CSS从入门到放弃相关推荐

跳过php学thinkphp,PHP学习-ThinkPHP《从入门到放弃》(六)
此次学习主要遇到的问题,502问题: 1.在PHPStorm中试图修改PHP解释器的路径(项目下边External Libraries/偏好设置中的-Language & framework- ...
前端学习之CSS快速入门-2021-09-20~22
CSS快速入门什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型浮动定位网页动画(特效效果) ...
Spring学习之路-从入门到放弃
后台框架是真难入门啊!!!IDE的使用,环境的搭建,框架下载,上手,每一步都恶心人. 花了整整两天,才学会用idea,并且初步了解了maven(TM就是一个npm),然后跟着下载了对应的jar包,搭建 ...
CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
Python学习笔记之从入门到放弃
笔记目录 9月22日:<基础教程>基础知识 ·模块导入 ·用变量引用函数(或者Python中大多数的对象) ·将数值转换成字符串的方法:str类型.repr函数 9月23日:列表.元组 · ...
python复数的实部和虚部都是整数嘛_Python学习笔记：从入门到放弃（2）基本语法...
这次主要就记录一下Python中的基本语法,有标识符,注释,行与缩进,print函数输出以及数字类型和字符串标志符: 第一个字符必须是字母表中字母或下划线 _ . 标识符的其他的部分由字母.数字和下 ...
python中复数的实部和虚部都是浮点数_Python学习笔记：从入门到放弃（2）基本语法...
这次主要就记录一下Python中的基本语法,有标识符,注释,行与缩进,print函数输出以及数字类型和字符串标志符: 第一个字符必须是字母表中字母或下划线 _ . 标识符的其他的部分由字母.数字和下 ...
Excel学习日记：L1-excel入门
1.在储存格输入完数据之后,按enter移动到下一个储存格,按tab移动到右一个,shift+tab移动到左边 2.将多个栏位一次调整为相同的宽度:框选所在的列,将鼠标放在顶端网格线中间,左右拖动即可 ...
深度学习环境搭建从入门到放弃
最近在一台联想ThinkCentre M920t上安装小影霸GTX 1080显卡,遇到了许多坑,特意记载下来. 常规操作:从官方下载*.run驱动文件,更新源,安装基础软件,禁nouveau,重启,关 ...

Day8学习日记CSS从入门到放弃

CSS