Acwing Web应用课CSS学习笔记上_acwing web课-CSDN博客

本文链接：https://blog.csdn.net/qq_41810415/article/details/125118755

Acwing Web应用课笔记——CSS

定义方式、选择器、颜色

文章目录

Acwing Web应用课笔记——CSS
一、样式定义方式
二、选择器
三、颜色

一、样式定义方式

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。

例如：width中默认px单位所以px可以不用写

<img src="/images/mountain.jpg" alt="" 
style="width: 300px; height: 200px;background-color=lightblue">```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        img {
            width: 300px;
            height: 200px;
            border-radius: 50%;
        }

        p {
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }

        .blue-p {
            background-color: lightsalmon;
        }

        .big {
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>
    <style>
        img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>
    <img src="/static/images/mountain.jpg" alt="">
    <p class="blue-p">1</p>
    <p class="big">2</p>
    <p class="blue-p">3</p>
    <p>4</p>
</body>

</html>

在这里插入图片描述

内部样式表（internal style sheet）
定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。
外部样式表（external style sheet）
定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。
注释
注意不能使用//。
只有：

/* 注释 */

  <title>Document</title>
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link rel="stylesheet" href="/static/css/style2.css" type="text/css">
</head>

<body>

    <img class="big" src="/static/images/mountain.jpg" alt="">
    <img src="/static/images/logo.png" alt="">
    <p class="blue-p">1</p>
    <p class="big">2</p>
    <p class="blue-p">3</p>
    <p>4</p>
</body>

顺序就按顺序来会覆盖的
css 没有单行注释只有多行注释

二、选择器

#+名称表示ID
.+名称表示类
什么都不加表示标签

2.1 标签选择器

选择所有div标签：

 div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.2 ID选择器(一般是唯一的)

选择ID为rect-1的标签：

  <div id="mydiv">div 2 </div>

#mydiv {
    background-color: lightseagreen;
}

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.3 类选择器（class）很常用

同一个标签可以有多个class

选择所有rectangle类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

如果两个class 都定义了颜色那么颜色选择哪一个
答案：和html里面写的顺序无关

 <div class=" big-tag red-tag">div 1 </div>  这里面写的顺序无关

与css这样的定义有关这里面定义的顺序有关后面的顺序都是覆盖前面的颜色

.big-tag {
    width: 120px;
    height: 120px;
    background-color: lightseagreen;
}

.red-tag {
    background-color: lightgrey;
}

2.4 伪类选择器

伪类用于定义元素的特殊状态。
伪类对应着状态

链接伪类选择器：

:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

例如鼠标放上图片上会变大也就是hover

 <div class="effect">div 3 </div>
  <button href="/about.html">about</button>
   <input type="text" name="" id="">

.effect:hover {
    transform: scale(2.0);/*放大2倍*/
    transition: 200ms;/*渐变的效果*/
}
button:focus {
    color: black;
}

input:focus {
    background-color: brown;
}

位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素.

p:nth-child(odd) {
    background-color: lightblue;
}

偶数变蓝 even 指的是奇数或者3n
2n+1 所有的奇数 n是自然数
目标伪类选择器：

:target：当url指向该元素时生效。

<p id="myp">p 1 </p>
    <p>p 2 </p>
    <p>p 3 </p>
    <p>p 4 </p>
    <a href="#myp">我的标签</a>

当点击我的标签会跳转到P1 然后P1 会变化成1.2倍同时p1字会边成橘色渐进变化3s

p:target {
    transform: scale(1.2);
    color: orange;
    transition: 3s;
}

2.5 复合选择器

由两个及以上基础选择器组合而成的选择器。

element1, element2：同时选择元素element1和元素element2。
一般写法每一项单独一行

div:hover,
p:hover{/*鼠标悬停有颜色*/
	background-color: lightblue;
}

element.class：选择包含某类的element元素。

div.big.real{/*当要求前面class类里面有big和real同时存在的时候在一起变大*/
	transform:scale(1.2);
}

element1 + element2：选择紧跟element1的element2元素。
比如：只改变紧跟着div后面的p

div+p{
 background-color:lightgreen;
}

在这里插入图片描述
第一个p没有跟在某一个p后面其余的是所以后面的都是粉红色

也可以是跟在id后面比如 #myp + p
这样的话就是
在这里插入图片描述
element1 element2：选择element1内的所有element2元素。
空格隔开
满足li的某个祖先节点是ul
也就是某标签颜色变了他的子节点也是那个颜色

 ul li{
	color:red;  
}

element1 > element2：选择父标签是element1的所有element2元素。
element2的父节点是和空格的区别是空格可以是祖先节点它必须是父节点
复合选择器可以串联

 li > ul > li {
 color:red;
 }

2.6 通配符选择器

*：选择所有标签

*{
	font-size:24px ;
}

[attribute]：选择具有某个属性的所有标签

input[required]{/*前面要是有requied标签的id 可以写id*/
	background-color:lightblue;
}

[attribute=value]：选择attribute值为value的所有标签

input[type = text]{  
	background-color:lightblue;
}

2.7 伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

::first-letter：选择第一个字母

p::first-letter{
	color:red;
	font-size:110%;
}

::first-line：选择第一行
只变红第一行

p::first-line{
	color:red;
	font-size:110%;
}

::selection：选择已被选中的内容

p::selection{
	color:red;
	background-color:blueviolet;
}

::after：可以在元素后插入内容
::before：可以在元素前插入内容
比如在h1这种标题前后加书名号

h1::before{
 content:"《";
 color:red;
}

h1::after{
	content:"》";
	color:red;
}

2.8 样式渲染优先级

后面的会把前面的覆盖掉但是越具体的话权重越大
加上！important临时把权重调到最高

p {
    width: 50px;
    height: 70px;
    background-color: lightgreen !important;
}

权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式
继承自父元素的权重最低

三、颜色

预定义的颜色值

black、white、red、green、blue、lightblue等。

16进制表示法

使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。

简写方式：#ABC，等价于#AABBCC。

RGB表示法

rgb(173, 216, 230)。

其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

RGBA表示法

rgba(173, 216, 230, 0.5)。

前三个数同上，第四个数表示透明度。

取色方式

网页里的颜色，可以在chrome的调试模式下获取 F12 或者快捷键ctrl +shift +c
其他颜色可以使用QQ的截图软件：

直接按c键，可以复制rgb颜色值
按住shift再按c键，可以复制16进制颜色值