【css教程】web前端入门学习 css（1）

黑马程序员Web前端入门教程，零基础前端视频教程pink老师_html5+css3

文章目录

html局限性
css简介（层叠样式表、级联样式表、css样式表）
css语法规范
css代码样式风格（推荐用展开式风格）（都用小写）（注意空格）
css选择器
选择器分类
- 标签选择器（语法、优缺点）（指定标签）
- 类选择器class（语法、注意事项）
利用类选择器画三个盒子（div）
css单标签多类名的使用方法
id选择器
通配符选择器 *
css字体属性font-family font-size（字体大小） font-weight（字体粗细）
字体样式font-style
css字体属性之复合属性（节约代码量）
字体属性总结
css文本属性
- 文本颜色color
- 对齐文本text-align
- 装饰文本text-decoration（下划线、删除线、上划线）取消a标签（链接）的下划线
- 文本缩进text-indent（em中文字符单位）
- 行间距 line-height
css文本属性总结
css引入方式（行内式、嵌入式、链接式）
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）（link rel="stylesheet" href=）

html局限性

css简介（层叠样式表、级联样式表、css样式表）

css语法规范

<!DOCTYPE html>
<html lang="en">
<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>p{color: red;font-size: 12px;}</style>
</head>
<body><p>我是红色的</p>
</body>
</html>

css代码样式风格（推荐用展开式风格）（都用小写）（注意空格）

css选择器

选择器分类

标签选择器（语法、优缺点）（指定标签）

类选择器class（语法、注意事项）

<!DOCTYPE html>
<html lang="en">
<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>.red {color: red;}.green {color: green;}</style>
</head>
<body><ul class="red"><li class="red">小艾</li><li class="green">小绿</li><li>小鹤</li><li>小坡</li><li>小惠</li></ul><div class="red">我也想变红色</div>
</body>
</html>

利用类选择器画三个盒子（div）

https://www.bilibili.com/video/BV1pE411q7FU?p=67&spm_id_from=pageDriver

<!DOCTYPE html>
<html lang="en">
<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>.red {width: 120px;height: 240px;background-color: red;}.green {width: 120px;height: 240px;background-color: green;}.blue {width: 120px;height: 240px;background-color: blue;}</style>
</head>
<body><div class="red">我是红色的</div><div class="green">我是绿色的</div><div class="blue">我是蓝色的</div>
</body>
</html>

css单标签多类名的使用方法

<!DOCTYPE html>
<html lang="en">
<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>.box {width: 99px;height: 240px;font-size: 35px;}.red {background-color: red;}.green {background-color: green;}.blue {background-color: blue;}</style>
</head>
<body><div class="red box">我是红色的</div><div class="green box">我是绿色的</div><div class="blue box">我是蓝色的</div>
</body>
</html>

id选择器

通配符选择器 *

css字体属性font-family font-size（字体大小） font-weight（字体粗细）

写多个字体的话，浏览器会从第一个开始一个一个往下找，安装了哪个就用哪个

字体样式font-style

css字体属性之复合属性（节约代码量）

<!DOCTYPE html>
<html lang="en">
<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>div {font:italic 700 16px 'Microsoft yahei'/* font:italic 700 16px '黑体' */}</style>
</head>
<body><div>我是红色的</div>
</body>
</html>

字体属性总结

css文本属性

文本颜色color

通常用16进制表达方式，一般通过ps吸取过来，不需要记

对齐文本text-align

装饰文本text-decoration（下划线、删除线、上划线）取消a标签（链接）的下划线

文本缩进text-indent（em中文字符单位）

行间距 line-height

css文本属性总结

css引入方式（行内式、嵌入式、链接式）

行内样式表（行内式）

内部样式表（嵌入式）

外部样式表（链接式）（link rel=“stylesheet” href=）

示例：

test.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><h4>你最喜欢吃的食物是？</h4><ul><li>西红柿</li><li>香蕉</li><li>榴莲</li><li><p>123</p><p>456</p></li></ul></body>
</html>

style.css

ul {color: rebeccapurple;
}

https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver

【css教程】web前端入门学习 css（1）相关推荐

web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390 代码:https://gitee.com/xiaoqiang001/html_css_materia ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
web前端入门学习 css（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver 文章目录 css引入方式总结综合案例:新闻页面 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
web前端入门学习 css（4）（盒子模型）
文章目录盒子模型(box model) 盒子模型的组成边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
web前端入门学习 css（3）（背景相关）
文章目录 css背景颜色(backgroud-color.transparent) css背景图片 background-image 背景平铺 background-repeat 背景图片位置 bac ...