前端之CSS学习
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>表单标签的补充说明</li><li>CSS层叠样式表</li><li>CSS学习预备知识</li><li>CSS选择器<ul><li>CSS基本选择器</li><li>标签的嵌套名称</li><li>CSS组合选择器</li><li>分组与嵌套</li><li>属性选择性</li><li>伪类选择器</li><li>伪元素标签</li><li>选择器优先级</li></ul></li><li>CSS样式调节<ul><li>字体样式</li><li>文字装饰</li><li>背景属性</li></ul></li></ul></div><p></p><h3 id="表单标签的补充说明">表单标签的补充说明</h3>
<pre><code class="language-python">基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据，只需要选择，那么我们需要自己填写value
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
ps:没有name属性的标签，form表单会直接忽略，不会发送
3.针对input标签理论上应该配一个label标签绑定，但是也可以不写
写法1:
<body>
<form action=""></form>
<label for="d1">username
<input type="text" id="d1">
</label>
</body>
写法2:
<body>
<form action=""></form>
<label for="d1">username</label>
<input type="text" id="d1">
</body>
4.标签的属性如果和属性值相等，那么可以简写
<input type="file" multiple="multiple">
简写:
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked>男性
<input type="radio" name="gender">女性'默认选择男性'
<select name="" id="">
<option value="" selected>222</option> '默认选择是222'
<option value="" >111</option>
</select>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
</code></pre>
<h3 id="css层叠样式表">CSS层叠样式表</h3>
<pre><code class="language-python">1.主要用来调节html标签的各种样式
"""
思考:页面都是由HTML构成的,并且页面上有很多相同的HTML标签，但是相同的标签在不同的位置可能有不同的样式，我们如何区分标签
"""
标签的两大重要属性>>>:区分标签
1.class属性
分门别类主要用于批量查找
2.id属性
精确查找主要用于点对点
学习css的流程
1.先学习如何查找标签
2.再学习如何调整样式
</code></pre>
<h3 id="css学习预备知识">CSS学习预备知识</h3>
<pre><code class="language-python">1.css语法结构
选择器 {
样式名1:样式值1;
样式名2:样式值2
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)
2.head内link标签引入(标准的方式)
3.标签内部通过style属性直接编写(不推荐)
</code></pre>
<h3 id="css选择器">CSS选择器</h3>
<p>每个CSS样式由两个部门组成:选择器和声明，声明又包括属性和属性值，每个声明之后用分好结束</p>
<p><img alt="img" loading="lazy"></p>
<h4 id="css基本选择器">CSS基本选择器</h4>
<pre><code class="language-css">1.标签选择器(直接按照标签名查找标签)
div {
color;red;
}
2.类选择器(按照标签的class值查找标签
<style>
.c1 { # 表示选择有c1值的标签
color: green;
}
</style>
3.id选择器(根据标签的id值精准查找标签)
<style>
#d1 { # 选择id值为d1的标签
color:rebeccapurple;
}
</style>
4.通用选择器(直接选择页面所有的标签)
<style>
* { # 所有的标签全部选择
color:rebeccapurple;
}
</style>
</code></pre>
<h4 id="标签的嵌套名称">标签的嵌套名称</h4>
<pre><code class="language-css"><body>
<p>ppp</p>
<p>ppp</p>
<div>div 父标签（祖先标签）
<div>divdiv 子标签（后代标签）
<p>divdivp
<span>divdivpspan</span>
</p>
</div>
<p>divp</p>
<span>divspan</span>
</div>
<p>ppp</p> 弟弟标签
</body>
针对标签的上下层级以及嵌套用外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
</code></pre>
<h4 id="css组合选择器">CSS组合选择器</h4>
<pre><code class="language-css">1.后代选择器(空格)
<style>
div { # 表示选择div所有的后代标(子标签及之后)
color: bisque;
}
</style>
2.儿子选择器
<style>
div>span {# 表示选择div的子标签span
color: bisque;
}
</style>
3.毗邻选择器(加号)
<style>
div+span { # 选择距离div结束语相邻的span标签
color: bisque;
}
</style>
4.弟弟选择器
<style>
div~span {
color: bisque;
}
</style>
ps:注意这里如果用标签名来选择后代的话，如果存在多个div会造成改变多个div下面的组合样式,想要精确需要使用class或者id
</code></pre>
<h4 id="分组与嵌套">分组与嵌套</h4>
<pre><code class="language-css"> <style>
div,p,span { # 多个选择器合并查找
color: bisque;
}
</style>
--------------------------------------------------------------------
<style>
#d1,.c1,span {# 选择id是d1,class是cl以及span
color: bisque;
}
</style>
--------------------------------------------------------------------
<style>
div.c1 { # 选择class是c1的div,包含div的后代标签
color: bisque;
}
</style>
--------------------------------------------------------------------
<style>
div#d1 {# 选择id是d1的div，包含div的后代标签
color: bisque;
}
</style>
--------------------------------------------------------------------
<style>
.c1 p.c2 {# 查找含有c1样式值里面的含有c2样式值的p标签
color: bisque;
}
</style>
</code></pre>
<h4 id="属性选择性">属性选择性</h4>
<pre><code class="language-python"> { 按照属性名查找
color: red;
}
{ 按照属性名等于属性值
color: yellow;
}
div {div里面含属性名username属性值jason
color: darkcyan;
}
</code></pre>
<h4 id="伪类选择器">伪类选择器</h4>
<pre><code class="language-python">"""
a标签补充说明，针对没有点击过的网址，默认是蓝色，点击过的则为姿色
"""
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {color: bisque} # 访问的链接
a:hover {color: #f584b7}# 鼠标移动到链接上的颜色
a:active {color: aqua} # 选定的链接
a:visited {color: blueviolet}# 已访问的链接
</style>
</head>
<body>
<a href="">点击此处</a>
</body>
</code></pre>
<h4 id="伪元素标签">伪元素标签</h4>
<pre><code class="language-css"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before { # 在p内容前面利用css动态添加
content: '复制不了吧';
color: #f584b7;
}
p:after { # 在p内容后面利用css动态添加
content: '这里也不给复制呢';
color: aqua;
}
</style>
</head>
<body>
<p>你这是什么意思呀，前面的你不能复制哦</p>
</body>
</code></pre>
<h4 id="选择器优先级">选择器优先级</h4>
<pre><code class="language-python">1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
</code></pre>
<h3 id="css样式调节">CSS样式调节</h3>
<h4 id="字体样式">字体样式</h4>
<pre><code class="language-python"> <style>
p {
color: #BF7293FF;
font-size: 36px;
font-weight: lighter;
}
</style>
字体样式
font-size:14px 24px 28px 36px 字体代码
font-weight: lighter; 字体粗细
color:三种模式
/*color: red;*/
/*color: #3d3d3d;*/
color: rgb(186,11,98);
rgba()最后一个参数还可以控制透明度 0~1
text-align: center 文本居中
text-decoration: none;主要用于a标签取消下划线
text-indent: 32px; 首行缩进
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: center">值</th>
<th style="text-align: center">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">normal</td>
<td style="text-align: center">默认值，标准粗细</td>
</tr>
<tr>
<td style="text-align: center">bold</td>
<td style="text-align: center">粗体</td>
</tr>
<tr>
<td style="text-align: center">bolder</td>
<td style="text-align: center">更粗</td>
</tr>
<tr>
<td style="text-align: center">lighter</td>
<td style="text-align: center">更细</td>
</tr>
<tr>
<td style="text-align: center">100~900</td>
<td style="text-align: center">设置具体粗细，400等同于normal，而700等同于bold</td>
</tr>
<tr>
<td style="text-align: center">inherit</td>
<td style="text-align: center">继承父元素字体的粗细值</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align: center">值</th>
<th style="text-align: center">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">left</td>
<td style="text-align: center">左边对齐 默认值</td>
</tr>
<tr>
<td style="text-align: center">right</td>
<td style="text-align: center">右对齐</td>
</tr>
<tr>
<td style="text-align: center">center</td>
<td style="text-align: center">居中对齐</td>
</tr>
<tr>
<td style="text-align: center">justify</td>
<td style="text-align: center">两端对齐</td>
</tr>
</tbody>
</table>
<h4 id="文字装饰">文字装饰</h4>
<p>text-decoration 属性用来给文字添加特殊效果。</p>
<table>
<thead>
<tr>
<th style="text-align: center">值</th>
<th style="text-align: center">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">none</td>
<td style="text-align: center">默认。定义标准的文本。</td>
</tr>
<tr>
<td style="text-align: center">underline</td>
<td style="text-align: center">定义文本下的一条线。</td>
</tr>
<tr>
<td style="text-align: center">overline</td>
<td style="text-align: center">定义文本上的一条线。</td>
</tr>
<tr>
<td style="text-align: center">line-through</td>
<td style="text-align: center">定义穿过文本下的一条线。</td>
</tr>
<tr>
<td style="text-align: center">inherit</td>
<td style="text-align: center">继承父元素的text-decoration属性的值。</td>
</tr>
</tbody>
</table>
<h4 id="背景属性">背景属性</h4>
<pre><code class="language-python"> div {
width: 800px;
height: 800px;
/*background-color: red;*/
/*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
/*background-image: url("666.png");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
background:url("666.png") blue no-repeat center center;
}
当多个属性名有相同的前缀 那么可以简写一次性完成
</code></pre><br><br>
来源：https://www.cnblogs.com/zhanghong1229/p/16942381.html
頁:
[1]