CSS 的基本概要

最新推荐文章于 2024-08-14 12:45:22 发布

mujiaoniao

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量407

点赞数

分类专栏： Web 文章标签：前端

本文链接：https://blog.csdn.net/mujiaoniao/article/details/121864880

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如何将HTML和CSS进行关联

1.内部关联<style>

2.外部关联 via <link rel = "stylesheet" href = "css资源的 URl" >

3.内联关联 via 元素的额style属性

认识选择器（selector）——重点

1.选择指定的元素：从整个文档（HTML整个文件）中进行选择，选择的是所有符合条件的元素，比如选择body元素： body{....}

选择所有的div元素： div{}

所有元素都支持的两个属性（attributes):

id (用来唯一表示一个元素的，建议不要重复)

class（用来描述元素分类，建议class元素可以多次进行使用）

当拥有了多个class元素时，使用空格进行分隔

< div id = "hello" class = "box container"></div>

意义：定义了一个分区（division),该分区的唯一标识符为"hello",该分区属于"box"和"container"分类

.large {
    width: 300px;
    height: 300px;
}

.medium {
    width: 200px;
    height: 200px;
}

.small {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.blue {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.square {

}

.circle {
    border-radius: 50%;
}

<!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>类选择器</title>
    
    <link rel="stylesheet" href="style.css">
    
    
</head>
<body>
    <div class="large red square"></div>
    <div class="small red circle"></div>
    <div class="medium yellow square"></div>
    <div class="large blue circle"></div>
    <div class="large blue square"></div>
</body>
</html>

2.id选择器：通过一个元素的id ，选择某一个元素

#id{...}

3.class类选择：通过一个指定的类别，选择某批元素

.class-name{...} box {...} . container {.....}

最基本的选择器：

元素选择器，id选择器，类选择器

body{} #some - id{} .some - class {...}

进阶的选择器

*{} ——通配符选择器—— 对所有的标签进行选择

组合选择器

//把元素选择器和类选择器进行了组合：

所有class中有hello的div元素——div.hello {..}

所有的class中既有hello，又有world的div元素——div.hello.world{...}

所有id是hello的div元素 —— div#hello{}

/* 选择所有的 body 元素，但 body 元素只有一个 */
body {
    background-color: blue;
}

div {
    width: 300px;
    height: 100px;
}

/* 所有 id 是 hello 的元素，听我号令 */
#hello {
    background-color: yellow;
}

/* 所有 id 是 world 的元素，听我号令 */
#world {
    background-color: green;
}

一次选择多种元素

p，#hello.world{}—— 所有的p标签和所有的id为hello的标签和所有的class中带有world的标签，进行统一的调用。

子孙选择器：

body p {} ——所有的body元素的子孙（包括儿子的儿子）中的所有的p标签

#hello div.world {} ——先找到id为hello的元素，然后在其所有的子孙中，满足class中有world的div元素，统一调用。

直系孩子选择器

body > p {...} body 元素的孩子（只包括儿子）中的所有的p标签

<a></a>
关于a标签的几种状态
初始的状态   ：link
鼠标的悬停在a标签上  ：hover
鼠标按下不松开   ：active
鼠标访问之后的状态  ：visited

a:link{}
a:hover{   }
/* 通过上述的操作进行调用*/

：focus 焦点

某个元素获得焦点是（1.鼠标点击该元素；2.通过tab切换焦点），该选择器生效

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus 焦点</title>
  <style>
<style>
        input {
            height: 100px;
        }

        input:focus {
            height:500px;
        }
    </style>
  </style>
</head>
<body>
<div>
  <input type="text">
</div>
<div><input type="text"></div>
<div><input type="text"></div>

</body>
</html>

样式应用覆盖的问题

1.越精细的选择器，它的优先级越高（会将不精确的覆盖）

div{
     background-color: red ;
     }
div.hello{
   background-color：blue;
}
/* 此时下面较为精细的选择器会将上面的选择器覆盖
关于优先级：  #id> .class > 元素
*/

HTML
<div class="hello">
    
</div>

2.同等优先级的情况下，写在下面的，会覆盖写在上面的

3.某些样式，自动带有继承功能，设置其父元素的样式，该元素的所有子孙，默认都按该样式处理；

css中常见的一些数值：

长宽：

绝对值：**px；

相对值： *em；相对于当前字体的两倍；

百分比： 100%；一般是相对于其父元素（相对的基准点是可以设置）

关于颜色：

rgb （255,0,0）纯红色

rgb （0,255,0）纯绿色

rgb （0,0,0）纯黑色

rgb （255,255,255）纯白色

agba 0-100 完全透明-完全不透明

————————————————————————————

rgba（255,138,252,0.3）

rgba(51, 170, 51, .4)    /*  40%不透明的绿色 */ 
hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
/*
font:

font-family 是 font 内的一个属性标签，但是font范围太广，当你在font内定义字体的时候中文字体需要加上双引号，例如"宋体"，并且font在W3C标准中不可以单独书写字体，必须填写完整其他属性，并且有顺序要求。
 但是，国际上很少有单独使用font的例子，一般定义字体都用font-family，免去了font的很多麻烦。 在书写符合W3C标准的CSS代码时，常用的字体定义无非font-family和font-size，并不累赘，所以，还是建议你使用font-family定义字体！ 如果不考虑W3C的问题，使用font也没有关系。
————————————————
版权声明：本文为CSDN博主「追梦少年的大牛计划」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44943631/article/details/101772148


font-family: 字体  设置多个候选  字体中有空格，用逗号引起
font-size: 字体的大小（px，em）
color：
rgb、hsl;

align:文本对齐
text-align:left\center\right

decoration:文本装饰
text-decoration : 没有装饰、下划线、中划线
  line:
  color
  style

indent:文本缩进
text-indent:2em; */

mujiaoniao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的基本概要

如何将HTML和CSS进行关联1.内部关联<style>2.外部关联 via <link rel = "stylesheet" href = "css资源的 URl" >3.内联关联 via 元素的额style属性认识选择器（selector）——重点1.选择指定的元素：从整个文档（HTML整个文件）中进行选择，选择的是所有符合条件的元素，比如选择body元素： body{....}选择所有的div元素： div{}所有元素都支持的两个属性（a..
复制链接

扫一扫

专栏目录