CSS学习

一、CSS概述

二、CSS的三种引入方式

(一)直接使用style标签编辑样式(调试样式代码时使用)

(二)使用link标签引入CSS文件(上线时使用)

(三)内嵌式(尽量不用，后期维护麻烦)

三、CSS常用选择器

(一)标签选择器(通过html标签选择元素)

(二)class选择器(通过class值选元素)

(三)id选择器(通过id值选元素，在CSS中用的少)

四、常用组合选择器

1.并集选择器

2.交集选择器

3.后代选择器

4.子代选择器

5.属性选择器

6.通用选择器

五、CSS常用样式

(一)文字、背景常用设置

(二)盒子模型

(三)div+css布局

(四)显示方式属性

(五)伪类选择器 (选取元素的交互状态)

(六)定位属性

一、CSS概述

CSS 层叠样式表。英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面(位置、大小、颜色、背景等......)。

CSS语法结构：

选择器{ // 根据元素特征选择元素样式: 样式值;样式: 样式值;
}// 例如：
h1{color: red;
}

二、CSS的三种引入方式

(一)直接使用style标签编辑样式(调试样式代码时使用)

<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h1{color: red;} </style>  
</head>
<body> <h1>我的标题</h1>
</body>

效果：

(二)使用link标签引入CSS文件(上线时使用)

可以使用三种路径：相对路径、相对根路径、绝对路径

创建外部\day2_css\css\mystyle.css文件

h1 {color: green;
}
h2 {color: blue;
}

rel="stylesheet"代表引用样式表

 <head>  <!-- 相对根路径 --><link rel="stylesheet" href="\day2_css\css\mystyle.css"><!-- 相对路径 --><link rel="stylesheet" href="./css/mystyle.css"><!-- 绝对路径 --><linkrel="stylesheet"href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"/></head><body><h1>相对根路径</h1><h2>相对路径</h2><h3 class="animated bounce">绝对路径</h3></body>

效果：

浏览器会把html、css文件一起进行解析，如果后面有js文件，也会被浏览器解析

(三)内嵌式(尽量不用，后期维护麻烦)

在元素上直接通过style属性编辑样式

通用属性：

id 给每个元素起标记

style 编辑样式

class 样式分类

<h1 style="color: aqua">我的标题</h1>

效果：

注意：

CSS三种引入方式中：后加载的会覆盖先加载的
方式一和方式二时后加载的覆盖先加载的
方式三会覆盖方式一和方式二的加载方式

三、CSS常用选择器

(一)标签选择器(通过html标签选择元素)

选取范围较大只要是页面中指定的标签都会选中

说明

根据标签名确定样式的作用范围

语法为元素名 {}

样式只能作用到同名标签上，其他标签不可用

相同的标签未必需要相同的样式，会造成样式的作用范围太大

<head><style>h1 {color: lightseagreen;}p {color: green;}</style>
</head>
<body><h1>静夜思--李白</h1><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p>
</body>

(二)class选择器(通过class值选元素)

选取范围精准，可以任意给元素指定class值，class值中有一个能匹配上即被选中。
class选择器配合class多值的特性，可以让选取元素非常灵活。

<head><style>h1 {color: lightseagreen;}/* p {color: green;} */.myp {color: green;}.myp1 {font-size: 30px;}</style>
</head>
<body><h1>静夜思--李白</h1><p class="myp myp1">床前明月光</p><p>疑是地上霜</p><p class="myp">举头望明月</p><p>低头思故乡</p>
</body>

(三)id选择器(通过id值选元素，在CSS中用的少)

选取范围精准，class可以替代id，id一般在写js时定义

<head><style>h1 {color: lightseagreen;}/* p {color: green;} */.myp {color: green;}.myp1 {font-size: 30px;}#aimp {color: red;}</style>
</head>
<body><h1>静夜思--李白</h1><p class="myp myp1">床前明月光</p><p>疑是地上霜</p><p class="myp">举头望明月</p><p id="aimp">低头思故乡</p>
</body>

基本选择器的优先级：id>class>标签权值高的覆盖权值低的

在浏览器页面上可以勾选调试CSS，但是要注意：

勾选调试最后确定的结果要重新复制到源码中，否则浏览器刷新不会生效！

四、常用组合选择器

1.并集选择器

同时选多种类型元素 选择器,选择器

<head><style>
/*标签,标签*/h1,p {color: lightseagreen;}/*标签,.class属性*/   h1,.myp {color: red;}</style>
</head>
<body><h1>静夜思--李白</h1><p class="myp">床前明月光</p><p>疑是地上霜</p><p class="myp">举头望明月</p><p>低头思故乡</p>
</body>

2.交集选择器

同时满足多种条件的元素 选择器选择器 先元素再其他

<head><style>/* 交集选择器 */.myp {color: red;}p.myp {color: blue;}</style>
</head>
<body><h1 class="myp">静夜思--李白</h1><p class="myp">床前明月光</p><p>疑是地上霜</p><p class="myp">举头望明月</p><p>低头思故乡</p>
</body>

3.后代选择器

选取元素内部的元素 选择器选择器 选取范围较大

<head><style>div p {color: blue;}.mydiv p {color: purple;}</style>
</head>
<body><h1 class="myp">静夜思--李白</h1><p>床前明月光</p><div class="testdiv"><p>疑是地上霜</p><div class="mydiv"><p>举头望明月</p><p>低头思故乡</p></div></div>
</body>

4.子代选择器

选取元素内部的子元素 选择器>选择器 选取较精准

<head><style>.testdiv > p {color: pink;}.testdiv > p > .mydiv > p {color: pink;}</style>
</head>
<body><h1 class="myp">静夜思--李白</h1><p>床前明月光</p><div class="testdiv"><p>疑是地上霜</p><div class="mydiv"><p>举头望明月</p><p>低头思故乡</p></div></div>
</body>

5.属性选择器

[属性名] 或者 [属性名=属性值]

<head><style>/*  [type] {color: red;}[type="button"] {color: indigo;} */.div1 [type="button"] {color: indigo;}.div2 [type="button"] {color: red;}</style>
</head>
<body><div class="div1"><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /></div><div class="div2"><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /></div>
</body>

6.通用选择器

* 做全局默认设置

<head><style>* {color: darksalmon;}</style>
</head>
<body><h1 class="myp">静夜思--李白</h1><p>床前明月光</p><div class="testdiv"><p>疑是地上霜</p><div class="mydiv"><p>举头望明月</p><p>低头思故乡</p></div></div><div class="div1"><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /></div><div class="div2"><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /><input type="text" value="输入框" /><input type="button" value="按钮" /></div>
</body>

五、CSS常用样式

(一)文字、背景常用设置

常用样式属性
1 color 文字颜色颜色英文
rgb值红绿蓝 0-255
#RGB 16进制
#3CF 相当于 #33CCFF

2 font-size 文字大小单位像素绝对单位
em rem 相对单位默认字体倍率
分辨率 1080p 1920*1080
2k
4k

3 font-weight 字体粗细数大的粗

4 font-family 字体类型默认黑体

5 text-align: center; 调整文字左右位置

6 line-height: 100px; 行高行高与块高一致文字正好在中心点

7.background-image: url(./imgs/niu.jpg); 背景图片
jpg png gif

8.background-size: 50%; 调整大小比例

9.background-repeat: no-repeat; 背景重复方式

10. background-color: blueviolet; 背景颜色背景图片与颜色一起使用时图片会盖在颜色上边

11. list-style:url(./imgs/niu2.png); 列表的标记可以使用图片

12. border: 1px solid black; 统一设置
四条边分开设置
left right top bottom

13. border-radius 像素百分比
四个角可以单独设置
border-bottom-left-radius: 30%;

<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.div1 {color: rgb(196, 185, 42);font-size: 30px;font-weight: 400;font-family: "黑体";text-decoration: none;text-align: center;width: 200px;height: 200px;border: 1px solid black;line-height: 170px;background-image: url(./imgs/photo.jpg); /*图片一般不调试大小，由UI设计师绘制*/background-size: 50%;background-repeat: no-repeat;background-color: aquamarine;border-bottom: 5px solid blue;border-left: 6px solid red;border-radius: 20px; /*也可以使用% 百分比最多到50% 正方形是圆圈，长方形是椭圆*/border-bottom-left-radius: 30%;border-top-right-radius: 30%;}a {text-decoration: none;}.myul {list-style: url(./imgs/flower.jpg);}ul.myul2 {padding-left: 10px; /* 移除<ul>元素的左内边距 */}ul.myul2 li {list-style-type: none;background-image: url("./imgs/搞笑小人.gif");background-repeat: no-repeat;background-position: left; /* 根据需要调整位置 */padding-left: 25px; /* 根据需要调整padding，为背景图像留出空间 */background-size: 16px 16px; /* 调整背景图像的大小 */}</style>
</head>
<body><div class="div1">测试</div><a href="###">测试超链接</a><ul class="myul"><li>以正确相处之道推动中美关系行稳致远</li><li>在家叫“胖妞” 出去记得叫鲲鹏热</li><li>尔滨装卸行李温柔得像放鸡蛋</li><li>郑钦文称不与选手交朋友 李娜回应</li></ul><div><ul class="myul2"><li>中国政府就黄岩岛领海基线发表声明</li><li>吃播版进博会来了</li><li>湖南2岁走失女童被警犬在山上找到</li><li>上海老太一个月偷超市10次猪肉被拘</li></ul></div>
</body>

(二)盒子模型

页面元素在排布时使用的逻辑概念盒子互相嵌套和排布

content 内容大小可以自动适应
也可以设置宽高：width height
border 边框特殊显示效果
padding 内部填充边框到内容之间填充 (元素整体会变大)
margin 外边距元素之间的间隔距离

margin: 100px auto; 元素居中特殊用法

<head><style>.mydiv{width: 100px;height: 100px;border: 10px solid black;/* padding: 50px; 内部填充  内容与边框的间隔 *//*   padding: 50px 40px 30px 20px; *//* padding-left: 50px; *//* 四个方向可以单独设置 *//* margin:10px *//* 外边距 控制元素与元素的间隔 *//* margin-left: 50px;margin-top: 50px; */margin: 0px auto;}h1{margin-top: 50px;}</style>
</head>
<body><div class="mydiv">测试div<br>12332111</div><div class="mydiv">测试div<br>12332111</div><h1>11111</h1>
</body>

(三)div+css布局

div+css布局实际上就是在页面中画格子大格子中套小格子

页面元素排布时像画table一样
行加单元格的思想来布局
div+css 宽高排版时为了方便适配通常使用相对单位
百分比高度使用百分比时要求父元素的高度已指定

视窗比例相对单位：
宽度 vw 100vw 视窗宽度100%
高度 vh 100vh 视窗高度100%

<head><style>/* html,body{margin: 0px;height: 100%;} */body {margin: 0px;}.mainPanel {width: 100vw;height: 100vh;background-color: lightgrey;}.top {width: 100%;height: 15%;background-color: rgb(255, 179, 179);}.middle {width: 100%;height: 70%;background-color: rgb(156, 234, 248);}.bottom {width: 100%;height: 15%;background-color: rgb(222, 238, 180);}.left {width: 20%;height: 100%;background-color: rgb(255, 119, 187);float: left;}.right {width: 80%;height: 100%;background-color: rgb(134, 69, 255);float: left;}</style>
</head>
<body><div class="mainPanel"><div class="top"></div><div class="middle"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></div>
</body>

(四)显示方式属性

display 元素显示方式
block 块方式显示
inline 行内方式显示
inline-block 行内快方式显示
none 不显示

显示规则：

块 (block) 从上到下排列宽高有效

行内(inline) 从左到右排列宽高无效

行内块() 从左到右排列宽高有效图片表单元素(输入框选择框按钮.....)

透明度：

opacity: 0; 透明度 0透明-1不透中间半透

rgba(41, 211, 168, 0.151) 也可以设置透明度

(五)伪类选择器 (选取元素的交互状态)

:active 鼠标点击
:hover 鼠标悬停 (鼠标放在了某个元素上)
cursor: pointer; 手型光标

<head><style> .testDiv{width: 100px;height: 100px;border: 1px solid black;}.testDiv:active{background-color: red;}.testDiv:hover{border: 10px solid rgb(114, 105, 105);cursor: pointer;}a:hover{font-size: 30px;}</style>
</head>
<body><div class="testDiv"></div><a href="###">aaaa</a>
</body>

(六)定位属性

定位属性 position

默认文档流块从上到下行内元素从左到右

relative 相对定位元素不脱离文档流元素以原始位置偏移

absolute 绝对定位元素脱离文档流以页面位置进行偏移

fixed 固定定位元素脱离文档流以页面位置进行偏移并固定在此处

static 默认文档流

top 向下偏移可以取负值反方向

left 向右偏移

z-index 图层顺序必须用在有定位改变的元素上 static时无效

悬浮窗居中

  <head><style>.div1 {width: 100px;height: 100px;border: 1px solid black;background-color: lightcoral;position: fixed;top: 10px;left: 10px;z-index: 1;}      .div2 {width: 100px;height: 100px;border: 1px solid black;background-color: lightgoldenrodyellow;/* margin-top: 50px; */position: fixed;top: 30px;left: 30px;/* left: -30px; */ /*可以写-值，往反方向偏移*//* right: 30px; */z-index: 2;}/* 悬浮窗居中 */.div3 {width: 300px;height: 100px;border: 1px solid black;background-color: lightskyblue;position: fixed;top: 50px;left: 50%; margin-left: -150px; /*宽度的一半，居中显示*/z-index: 3;}</style></head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body>