您的位置：首页 > Web前端 > CSS

CSS

2020-07-14 06:07 274 查看

CSS

1，如何学习CSS

重难点：CSS选择器

2，CSS简介

2.1，什么是CSS

CSS 指层叠样式表（Cascading Style Sheets），层叠的意思是：多重样式定义被层叠为一。
CSS 是标准的布局语言，用来控制元素的尺寸、颜色、排版。
CSS 非常精确，功能强大，易于编写。

2.2，发展史

2.3，CSS优势

3，CSS导入方式

很重要：在CSS，JS，JQuery，VUE里面都有用。

优先级：就近原则（行内样式 > （内部样式/外部样式）看谁离得比较近）

<!-- 1，行内样式：直接在代码中定义 不推荐使用 -->
<div style="background-color: red">DIV1</div>

<!-- 2，内部样式：在head头部定义 -->
<head>
<style type="text/css">
div{
background-color: green
}
</style>
</head>
<body>
<div>DIV0</div>
</body>

<!-- 3，外部样式(链接式)：引用css文件 -->
<head>
<link rel="stylesheet" href="new.css">
</head>
<body>
<div>DIV0</div>
</body>
css文件中：
------------------------
@charset "UTF-8";
div{
background-color: orange;
}
------------------------

<!-- 4，外部样式(导入式)：引用css文件 -->
<!-- CSS2.1后写法，不推荐使用 -->
<head>
<style>
@import url("new.css")
</style>
</head>

4，选择器

4.1，基本选择器

标签选择器：选择一类标签（h2,a等）。
类选择器（.）：选择指定class类的某些标签，跨标签。
id选择器（#）：选择特定id的标签，全局唯一。

优先级：id选择器 > 类选择器 > 标签选择器

<!-- 标签选择器 -->
<style type="text/css">
div{
background-color: green
}
</style>

<!-- 类选择器 -->
<style type="text/css">
.classname1{
background-color: orange
}
</style>
<body>
<div class="classname1">suxi</div>
</body>

<!-- id选择器 -->
<head>
<style type="text/css">
#divid1{
background-color: orange;
}
</style>
</head>
<body>
<div id="divid1">wahaha</div>
</body>

4.2，层次选择器

4.2.1，后代选择器（空格）

概念：在某个元素后面的全部某个元素（子子孙孙）

/* body 里面包含的所有p标签*/
body p{
background-color: aqua;
}
<body>
<div>
<p>第零个段落</p> /* aqua */
<div>
<p>第一个段落</p> /* aqua */
</div>
</div>
<p>第二个段落</p> /* aqua */
<p>第三个段落</p> /* aqua */
<p>第四个段落</p> /* aqua */
</body>

4.2.2，子选择器（>）

概念：在某个元素后面一个层级的全部某个元素（只有他的孩子）

body>p{
background-color: aqua;
}
<body>
<div>
<p>第零个段落</p>
<div>
<p>第一个段落</p>
</div>
</div>
<p>第二个段落</p> /* aqua */
<p>第三个段落</p> /* aqua */
<p>第四个段落</p> /* aqua */
</body>

4.2.3，相邻兄弟选择器（+）

概念：可选择紧接在另一元素后的元素，且二者有相同父元素。
2个关键信息：（1）紧接在另一元素后；（2）二者有相同父元素

/* 案例一*/
<head>
<meta charset="utf-8">
/* 指定紧接在同级别li后面的li标签使用这个样式*/
<style>
li+li{
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li> /* 变色*/
<li>List item 3</li> /* 变色*/
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li> /* 变色*/
<LI>List item 3</LI> /* 变色*/
</ol>
</body>

/* 案例二 */
<head>
<meta charset="utf-8">
/* 指定紧接在同级别div后面的p标签使用这个样式*/
<style>
div+p{
background-color: aqua;
}
</style>
</head>
<body>
<div>
<p>第零个段落</p>
<div>
<p>第一个段落</p>
</div>
</div>
<p>第二个段落</p> /* 变色 */
<p>第三个段落</p>
<p>第四个段落</p>
</body>

4.2.4，通用兄弟选择器（~）

概念：位置无须紧邻，只须同层级，

A~B

选择

元素之后所有同层级

元素。（不包括A）

<head>
<meta charset="utf-8">
<style>
.active~p{
background-color: aqua;
}
</style>
</head>
<body>
<p>第0段落</p>
<p>第0段落</p>
<p>第0段落</p>
<div>
<p>第零个段落</p>
<div>
<p>第一个段落</p>
</div>
</div>
<p>第二个段落</p>
<p>第三个段落</p>
<p class="active">第四个段落</p>
<p>第五个段落</p> /* 变色 */
<div>
<p>段落</p>
</div>
<p>第六个段落</p> /* 变色 */
</body>

4.3，结构伪类选择器（:）

伪类：冒号：后面的东西，用来在结构中定位。

4.3.1，div p:first-child/last-child

按位置：
div元素后面的第一/最后的p元素。

<style>
div p:first-child{
background: aqua;
}
div p:last-child{
background: purple;
}
</style>
<body>

<p>第01段落</p>
<p>第02段落</p>
<p>第03段落</p>
<div>
<p>第零个段落</p>  /* aqua */
<div>
<p>第一个段落</p> /* 先aqua后purple，最终purple */
</div>
<p>第x个段落</p> /* purple */
</div>
<p>第二个段落</p>
<p>第三个段落</p>
<p class="active">第四个段落</p>
<p>第五个段落</p>
<div>
<p>段落</p> /* 先aqua后purple，最终purple */
</div>
<p>第六个段落</p>

<form action="我的HTML.html" method="get">
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<input type="submit">
</form>
</body>

4.3.2，p:nth-child(1)

按位置：
第一步：定位p的父元素(p的第一个作用)
第二步：定位父元素下的第一个元素(数字的作用)
第三步：判断如果类型是p成立(p的第二个作用)

<style>
p:nth-child(1){
background: red;
}
</style>

<body>

<p>第01段落</p> /* 变色 */
<p>第02段落</p>
<p>第03段落</p>
<div>
<p>第零个段落</p> /* 变色 */
<div>
<p>第一个段落</p> /* 变色 */
</div>
</div>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<p>第五个段落</p>
<div>
<p>段落</p> /* 变色 */
</div>
<p>第六个段落</p>

<form action="我的HTML.html" method="get">
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p> /* 变色 */
<input type="submit">
</form>
</body>

4.3.3，p:nth-of-type(2)

按类型：
第一步：定位p的父元素(p的第一个作用)
第二步：定位父元素下的p元素(p的第二个作用)
第三步：选择第二个(2的作用)

<style>
p:nth-of-type(2){
background: red;
}
</style>

4.3.4，其他

/* 光标移动到a标签上时显示颜色*/
a:hover{
background: red;
}

5，属性选择器（[ ]）

相当于id和class的结合：标签[]{} --> a[]{}

条件：在[]里面判断，里面可以是，直接属性名，或者属性名=属性值（使用正则表达式）
= 绝对等于
*= 包含
^= 开头等于
$= 结尾等于

/* 存在id属性的a标签*/
a[id]{
background: red;
}

/* id属性等于first的a标签*/
a[id=first]{
background: red;
}

/* id属性等于first的a标签*/
a[id*="links"]{
background: red;
}

/* href属性开头包含http的a标签*/
a[href^="http"]{
background: red;
}

/* href属性结尾包含pdf的a标签*/
a[href$="pdf"]{
background: red;
}

条件：在[]里面判断，里面可以是，直接属性名，或者属性名=属性值（使用正则表达式）
= 绝对等于
*= 包含
^= 开头等于
$= 结尾等于

```html
/* 存在id属性的a标签*/
a[id]{
background: red;
}

/* id属性等于first的a标签*/
a[id=first]{
background: red;
}

/* id属性等于first的a标签*/
a[id*="links"]{
background: red;
}

/* href属性开头包含http的a标签*/
a[href^="http"]{
background: red;
}

/* href属性结尾包含pdf的a标签*/
a[href$="pdf"]{
background: red;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航