Day48——前端知识CSS

分类：菜鸟笔记作者：lzq78998

文章目录

表单标签知识补充

  1. 获取用户输入的标签(input)的两大重要属性

    • name属性
      相当于字典里的健
    • value属性
      相当于字典里的值

    强调:form表单在往后端发送数据的时候，必须要有name属性，否则后端不知道你发送的是什么属性，所以也就不会发送该标签的值。

  2. 获取用户输入的标签理论上是需要label的配合的

    <p>
  <label for="">
    <input type="text">
  </label>
</p>

  3. 获取用户输入的input标签也可以给name属性添加提示

    <p>
	<input type="text" name="password" placeholder="密码">
</p>

  4. 获取用户输入的标签如果不是用户自己选择的，那我们要提前写好value值

      <p>gender:
    <input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female">女
  </p>

  5. 针对radio和checkbox可以默认选中

    checked="checked" 如果属性名和属性值相等 那么可以简写  checked

  6. 针对option标签也可以默认选中

    selected = 'selected' 格式可以简写为selected

CSS层叠样式表

简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

语言特征

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

  • 丰富的样式定义
  • 易于使用和修改
  • 多页面应用
  • 层叠
  • 页面压缩

语言结构

选择器 {
     属性名1:属性值1;
	  属性名2:属性值2;
}

注释语法

/*注释内容*/

编写CSS的三种方式

  1. head中style标签内部直接编写(学习阶段使用 方便)
  2. head中link标签引入外部css文件(最正规)
  3. 直接在标签内部通过style属性编写(不推荐)

CSS选择器

CSS基本选择器

  1. 标签选择器(范围查找)
    直接编写标签名来查找标签

    div {
	color: red  /*查找所有的div标签 并将内部的文本颜色变为红色*/
}

  2. 类选择器(范围查找)
    通过编写class的值来查找

    .c {
	color: red  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}

  3. id选择器(精确查找)
    通过编写id的值来精确的查找到标签

    #d1 {
	color: red  /*查找id值是d1的标签 并将内部的文本颜色改为红色*/
}

  4. 通用选择器
    查找所有的标签

    * {
	color: red  /*查找所有的标签 并将内部的文本颜色改为红色*/
}

CSS组合选择器

预备知识：

标签之间的关系

<div>div1
<div>div2
	<p>p1</p>
</div>
<p>p2
	<span>span1</span>
</p>
<span>span2</span>
</div>

通过嵌套层级分析关系：

  1. 对于div1来说div2、p2、span2都是儿子
  2. 对于div2、p2、span2来说div1就是父亲
  3. 对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
  4. 对于span2来说div2、p2是哥哥 span2是弟弟
  5. div1内部所有的标签无论层级都可以称之为是div1的后代

  • 后代选择器(关键字是空格)

    #d1 span{
	color: red  /*查找id是d1标签内部所有的后代span*/
}

  • 儿子选择器(关键字是大于符)

    #d1 > span{
	color: red  /*查找id是d1标签内部所有的儿子span*/
}

  • 毗邻选择器(关键字是加号)

    #d1 + p{
	color: red  /*查找id是d1标签同级别下面紧挨着第一个p标签*/
}

  • 弟弟选择器(关键字是小波浪符)

    #d1 ~ span{
	color: red  /*查找id是d1标签同级别下面的所有的span标签*/
}

CSS属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
默认属性   id class
自定义属性 x=1 y=2

  • 方法一：直接通过属性查找

    [name] {
	background-color: blue;  /*查找属性名含有name的标签*/
}

  • 方法二：查找属性名含有name并且值是username的标签

    [name = username] {
	background-color: red;
}

  • 方式三：查找input标签并且 属性名含有name值是username的

    input[name = username] {
	background-color: orange;
}

强调:前面的选择器可以是任意类型的 标签、id、class

分组与嵌套

  1. 当多个选择器查找到的标签需要调整相同的样式 那么可以合并

    div, p, span {
	font-size: 20px;
	color: aqua
}

  2. 并且合并的选择器彼此不干扰也没有类型的限制

    #d1, .c1, span {
	background-color: red
}

  3. 还可以在选择器基础之上添加额外的选择使得查找更精确

    div#d1		查找id是d1的div标签
div.c1		查找class包含c1的div标签

div #d1   查找div内部id是d1的后代标签
#d1>.c1	  查找id是d1的内部class包含c1的儿子标签

常用伪类选择器

补充知识:

a标签默认的颜色有两种 紫色跟蓝色
	紫色:链接地址已经被点击过了
	蓝色:链接地址从来没有点击过

  1. 鼠标悬浮(适用于含有所有文本的标签)

    a:hover {
	color: red  
}  鼠标移动到p标签上方 字体颜色动态修改为红色

  2. 获取聚点

    input:focus {  输入框被鼠标左键选中(聚焦)
     background-color: black;
 }

伪元素选择器

  1. 修改首个字体样式

    p:first-letter {
	font-size: 20px;
	color: orange;
}

  2. 在文本开头添加内容

    p:before {
	conter: '加油';
	color: red;
}

  3. 在文本末尾添加内容

    p:after {
	conter: '好结果';
	color: blue;
}

强调：伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬

before和after多用于清除浮动。

选择器优先级

  1. 相同选择器
    就近原则:谁离标签越近就听谁的!!!

  2. 不同选择器
    行内选择器 > id选择器 > 类选择器 > 标签选择器

在这里插入图片描述

CSS修改属性

CSSx修改文字属性

宽和高：

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

  • 文字字体

    font-family: '微软雅黑'

  • 字体大小

    font-size: 20px

  • 字体粗细

    font-weight: lighter
    值 描述
    normal 默认值，标准粗细
    bold 粗体
    bolder 更粗
    lighter 更细
    100~900 设置具体粗细，400等同于normal，而700等同于bold
    inherit 继承父元素字体的粗细值

  • 字体颜色

    • 方式一

      color: red

    • 方式二

      color: rgb(128, 128, 128)

    • 方式三

      color: #4F4F4F

    • 方式四

      color: rgba(128,128,128, 0~1)  # 0~1表示的是颜色透明度

  • 文字对齐

    text-align: center(居中)/left(左对齐)/right(右对齐)

  • 文字装饰
    a标签默认带下划线

    a {
	text-decoration: none  (主要就是用于去除a标签的下划线)
	text-decoration: line-through;  删除线
	text-decoration: overline;		上边线
	text-decoration: underline;		下划线
}

  • 文字首行缩进

    text-indent: 32px

补充: 可以使用浏览器做样式的动态调整，查找到标签的css 然后左键选中 通过方向键上下动态修改数值

CSS背景属性

关键字：background

  1. 背景颜色

    background-color: red;

  2. 背景图片

    background-image: url(图片地址);

    背景图片如果没有设置的区域大 那么默认自动填充满

    background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
background-position:left top;  图片位置
background-attachment: fixed;  背景附着

如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)

eg：background:#336699 url('1.png') no-repeat left top;

CSS边框属性

关键字：border

  1. 自定义调整每个边的边框

    border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;

  2. 统一调整每个边的边框

    border: 5px solid blue;  （依次是：大小、样式、颜色） 顺序无所谓 只要给了三个就行

边框样式:

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

边框属性

  • border-width

  • border-style

  • border-color

  1. 圆角边框

    border-radius: 50%

    用这个属性能实现圆角边框的效果。

    将border-radius设置为长或高的一半即可得到一个圆形。

    如果长宽一样那么就是圆，不一样就是椭圆

CSS-display属性

根据CSS规范的规定，每一个网页标签都有一个display属性，用于确定该标签的类型，每一个元素都有默认的display属性值，比如div标签，它的默认display属性值为“block”，称为块级标签，而span元素的默认display属性值为“inline”，称为“行内”标签。

值 意义
display:“none” HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block” 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline” 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block” 使元素同时具有行内元素和块级元素的特点。

重点掌握：

display: none

visibility:hidde 也是隐藏标签 但是位置会保留

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot