前端基础——CSS 选择器、网页美化

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS:表现和美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
发展史：
CSS1.0
CSS2.0： DIV（块）+CSS , HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1: 浮动，定位
CSS3.0：圆角，阴影，动画……浏览器兼容性

快速入门及CSS的优势

入门

<head><meta charset="UTF-8"><title>Title</title>
<!--规范：<style>可以编写css代码   每个声明最好用分号结尾
语法：
选择器{
声明1；
声明2；
……
}；
--><style>h1{color: blueviolet;}</style>
</head>

html与css分离：

h1{color: blueviolet;
}

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">   <!--这里用link定位-->
</head>

优势

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

四种CSS导入方式（3种常用）

优先级：就近原则（最近的一定是行内样式，内部和外部样式看排列方式）

<head><meta charset="UTF-8"><title>Title</title>
<!--内部样式--><style>h1{color: blue;}</style>
<!-- 外部样式--><link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可--><h1 style="color: brown">我是标题</h1>
</body>

/*外部样式*/
h1{color: yellow;
}

拓展：外部样式的两种写法
- 链接式（link）常用
- 导入式：
  - 弊端：网页元素太多时会先展示框架再渲染
  - 是CSS2.1特有的

 <style>   @import url("css/style.css");</style>

选择器——重要！

作用：选择页面上的某一个或一类元素

三种基本选择器

1.标签选择器：选择一类标签
2.类选择器：选中所有 class属性一样的标签，可以跨标签

<head><meta charset="UTF-8"><title>Title</title><style>/* 类选择器的格式  .class的名称{}好处：可以多个标签归类，是同一个class*/.qinjiang{color: #67c23a;}.kuangshen{color: mediumblue;}</style>
</head>
<body><h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1>标题3</h1>
<p class="qinjiang">我不是标题</p>
</body>

3.id选择器：全局唯一！！不要重复

<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器:id必须保证全局唯一！！！不建议重复使用#id名称{}*/#qinjiang{color: brown;}.style1{color: blue;}h1{color: #57a527;}</style></head>
<body>
<h1 id="qinjiang" class="style1">标题1</h1>
<h1 >标题2</h1>
<h1 class="style1">标题3</h1>
<h1 class="style1">标题4</h1></body>

不遵循就近原则，有固定顺序
- id选择器>class选择器>标签选择器

层次选择器（四种）

html部分：

<body>
<p>p0</p>
<p class="active">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>

1.后代选择器：在某个元素的后面的所有代

 /*    后代选择器     body后面所有p标签 p1--p6*/body p{background: yellow;}

2.子选择器：只有儿子这一代

 /*    子选择器     body后面那一代里所有p标签 即只有p1,p2,p3*/body>p{background:green;}

3.相邻（下）兄弟选择器：对下一个同辈（只有一个！！）

 /*    相邻（下）兄弟选择器 即p2 */.active+p{background: black;}

4.通用兄弟选择器：向下的所有同辈，即p2,p3

 /*    通用兄弟选择器*/.active~p{background: blueviolet;}

结构伪类选择器

HTML代码同上
选择器代码：

/* ul的第一个 子元素  */
ul li:first-child{background: #67c23a;
}/* ul的最后一个 子元素 */
ul li:last-child{background: yellow;}/*选中p1:定位到当前元素的父元素，选择这个父级元素的第一个子元素（第一个子元素必须是与当前元素同类（p）的才生效）不能顺延*/
p:nth-child(1){background: blue;
}/*选中其父元素下的第2个p元素！！只要存在第2个p元素就能生效*/p:nth-of-type(2){background: brown;}

属性选择器（常用）

通过属性甚至属性的值来选择元素

/*1[2]{}      存在2属性的1类型的元素*/a[id]{}/*1[2=3]{}     存在2属性的值等于3的1类型的元素*=表包含3^=表示以3开头，$=表示以3结尾*/a[id="123"]{}

美化网页元素

注意：要重点突出的内容，用span包起来

字体样式：

文字的字体、文字大小、颜色等属性

body{/*字体 可以设置两种用逗号隔开，中英文分别应用两种*/font-family: 楷体;/*字体大小*/font-size: 50px;/*字体粗细*/font-weight: bold;}/*也可一行设置多个属性：*/p{font: oblique bold 16px 楷体;}

文本样式

背景颜色、对其方式、首行缩进、行距和装饰等

/*文字与图片居中对齐*/a,b{vertical-align: middle}body{/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命或者使用rgb()rgba()函数，后者多一个透明度参数*/color: rgb(0, 0, 0);/*排版：居中等*/text-align: center;/*首行缩进 em为一个字母位置*/text-indent: 2em;/*行高和块高，如果一样可以有上下居中的效果*/height: 100px;line-height: 100px;/*上、下、中划线 设置划线颜色大多浏览器不支持同时只能有一个划线，应该遵循覆盖的就近原则*/text-decoration-color: #d60005;text-decoration: underline;text-decoration: overline;text-decoration: line-through;/*超链接去除下划线*/text-decoration: none;/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/text-shadow: black 5px 5px 1px}

超链接伪类

让超链接在被选中或者点击等状态时，有不同的形态

 /*正常显示*/a{}/*鼠标悬浮的状态*/a:hover{}/*鼠标悬浮未释放的状态*/a:active{}/*已访问的链接（点过链接紫色的样子）*/a:visited{}

前端基础——CSS 选择器、网页美化相关推荐

2 - 前端基础--CSS 选择器
引入css方式(重点掌握) 1.行内样式 <div> <p style="color: green">我是一个段落</p></div> ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
11. 前端基础--CSS盒子定位
文章目录前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
小白IT：炫彩的网页是怎么做的，什么是前端？？？Python前端基础CSS 效果渲染
文章目录一认识HTML 1.web服务的本质 2.HTML是什么? 3.html文档格式 4.html标签格式标签的语法几个重要的属性 HTML注释二.常用标签 1.!DOCTYPE标签 2 ...
2023高薪前端面试题（一、前端基础——css）
• 说一下 css 盒模型盒模型分为IE盒模型和W3C标准盒模型.盒子的宽度和高度的计算方式由box-sizing属性控制. box-sizing属性值 content-box:默认值,conten ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
前端基础-CSS的属性相关设置
一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值描述 normal 默认值,标准粗细 ...
三十六、前端基础 CSS
CSS相关一 CSS简介二 CSS选择器 2.1 基本选择器 2.2 组合选择器 2.3 属性选择器 2.4 分组与嵌套 2.5 伪类选择器 2.6 伪元素选择器 2.7 选择器优先级三字体样 ...
前端基础——CSS布局
前端基础学习第三天文章目录前端基础学习第三天一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...

前端基础——CSS 选择器、网页美化

什么是CSS

快速入门及CSS的优势

入门

优势

四种CSS导入方式（3种常用）

选择器——重要！

三种基本选择器

层次选择器（四种）

结构伪类选择器

属性选择器（常用）

美化网页元素

字体样式：

文本样式

超链接伪类

前端基础——CSS 选择器、网页美化相关推荐

最新文章

热门文章