2022-07-10 第一小组 张明旭 前端CSS学习记录

今天是正式学习的第二天,昨天那个作业项目真的难,自己做一会就得问这问那,还有大神带一带(?_?)...
今天学习的内容是前端中的CSS,男上加男。。。。。

知识点:
Css层叠式表(网页美化)
1.定义样式表
2.把样式表添加到HTML中

一.定义样式表
1.每一个标签都有行内样式style:
行内样式好不好?
如果样式不重复使用可以用
<p style=”background:red;“>...</p>

<!-- 行内样式,内联样式 -->
    <p style="background: rgb(0, 255, 85);">I love Java</p>
    <span style="background: rgb(0, 255, 85);">I love css</span>
    <h1 style="background: rgb(0, 255, 85);">i love html</h1>

2.内页样式(嵌入样式)
(1):标签选择器

/* 根据标签来命名 */
        /* 选择器selector */
        /* 标签选择器:可以让页面上所有的p标签都有对应的样式 */
        p {
            background: red;
        }
        span {
            background: yellow;
        }

(2):类选择器:声明样式需要一个英文的点: . ,属性用class不要有点

/* 类选择器 */
        /* 标签选择器和类选择器哪个优先级高? */
        .bg {
            background: blue;
        }

(3):ID选择器:声明样式需要一个#,对应的元素的id要匹配

/* id选择器 */
        #spring {
            background: purple;
        }

3.外部样式(推荐使用)

<!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="你的CSS链接">

优先级:最高优先级是直接在标签中设置样式
其次是id选择器
其次是类选择器
最后是标签选择器
4.css选择器:
1、标签选择器
2、类选择器:一个标签元素可以选择多个样式,样式名中间空格隔开
3、id选择器
4、div,p{}:并级选择器:使页面上所有的标签div和p样式相同

div,p {
            color: yellow;
        }

5、div p{}:后代选择器:选中只要在div里的p,无论嵌套多少层的选择器

/* div里面的p */
       div p {
            color: purple;
        } 
        

6、div>p{}:子代选择器:选中只要在div里的p的选择器

div > p {
            color: orange;
        }

7、div+p{}:选中紧跟着div的p 的选择器

/* 选中紧跟着div的p */
        div+p {
            color: blue;
        }

8、[type]{}: 选中所有带有type属性的标签
9、[type=text]{}:选中页面上所有带type=text属性的标签
10、[type~=t]{}: 选中页面上title属性包含单词的所有元素
11、伪类选择器:link: hover: active: visited:

/* 默认样式 */
        a:link {
            color: red;
        }
        /* 鼠标悬停样式 */
        a:hover {
            color: green;
        }
        /* 元素被激活 */
        a:active {
            color: blue;
        }
        /* 点过的链接 */
        a:visited {
            color: gray;
        }

12、nth-child(){}:选中第几个或一系列有规律的标签的选择器
让第3个序列变红
让表格的2n行变红

li:nth-child(3) {
            color: red;
        }
tr:nth-child(2n) {
            background: red;
        }

13、:checked:选中所有被选中的元素

二、css层叠样式表
1、层叠性:(1)如果样式冲突 ,遵循就近原则(那个样式离结构近用哪个)
(2)如果样式不冲突,就不层叠
2、继承性:子标签会继承父标签的某些样式。文本颜色、字号、背景颜色

优先级:类>标签>id>
权重(重要性):(1)继承的样式权重最低
(2)行内样式权重最高
(3)如果权重相同,就近原则
(4)用!important更改权重为无限大
三、css常用的单位
1、px像素:绝对单位,一个像素代表一个点。如100px*100px的正方形,宽高为100个点
2、em是相对单位。它会参考它的父级元素,字体,父级元素的字体是16px,
要设置元素的字体大小为2em,当前元素的字体大小就是32px
3、rem是相对单位,有页面决定,当浏览器字体改变了字号设置,页面的字号也随之变化。应用于老人版
4、百分比:相对于父级元素的比例。

posted @   华丽转身撞到墙  Views(25)  Comments(0Edit  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示