美文网首页
css学习记录

css学习记录

作者: 像我这么帅的一般都是主角 | 来源:发表于2022-07-14 14:17 被阅读0次

前端三层:

Html结构层,从语义角度去搭建网页结构。Css样式层,从美观角度去修饰页面样式。Javascript行为层,从交互的角度去描述页面的行为。

Css的属性值写法:k:v(html中,写法为k=“v”) 中间分号隔开

文字三属性:color,font-size,font-family

  1. 颜色属性color

单词表示法style="color:blue" 还有十六进制法,RGB法

  1. 字号font-size

通常是以px为单位的值

  1. 字体 font-famil

属性值必须以双引号包裹,属性值可以有多个,使用逗号隔开,浏览器不识别前面的字体会自动向后识别,中英文分开进行加载

盒子三属性:width,height,background-color 常用属性值通常以px为单位

Css样式表

  1. 行内式:style后面中引入css样式

<div style="width: 100px;height: 100px;background-color: blue"> </div>

  1. 内嵌式:在head标签内部,title下面,在style标签中

<style>

div{

color: blue;

}

</style>

  1. 外链式:在外部写好css文件,在html文件内head内,title下方

<link rel="stylesheet" href="css/1.css">

Link标签引入外部文件,通过href属性,属性值式地址

Rel属性值若为stylesheet,代表的式引入样式表

通过引入css到html文件中,从而实现样式的加载。

Css文件的内部不需要写任何标签,直接属性css选择器和代码,因为css文件内部是不允许属性html骨架的

  1. 导入式:head内,title下,必须写在style的最顶部

<style>

@import url(css/1.css);

</style>

选择器

1. 基础选择器:标签选择器,id选择器,类名选择器

1) 标签选择器:通过标签来选择

选择范围:HTML中所有的同名标签

标签选择器无视嵌套规则,实现全选同名标签,设置公共样式

2) Id选择器:通过id属性进行选择,#id属性值(自定义)

选择范围:只能选中一个标签

p1{

color: blue;

}

<p id="p1">

段落标签

</p>

具有唯一性,一个页面内不允许有同名id,单选

3) 类名属性:通过标签上的class属性进行选择

匹配对应的class属性值

选择范围:选择所有同名class

.par{

color: blue;

}

<p class="par">

段落标签

</p>

一个标签的class属性值可以有一个或多个

Id和class的命名规范:第一个字符必须是字母,后面可以是数字字母下划线

4) 通配符选择器:选择包含html标签在内的所有标签

通配符*后面添加的样式,每个标签都会加载一次,我们通常使用清除页面的样式

*{

color: blue;

}

类比数据库,若无其他说明则全选

2. 高级选择器:后代选择器,交集选择器,并集选择器

1) 后代选择器:通过标签之间的后代关系去选择决定某个范围内的元素

image.png image.png image.png

Css的继承性和层叠性

  1. 继承性

Css可以继承的属性都是关于文字的,比如color,font-size,font-family

选择器权重:id>class>标签

Css文字属性

  1. 颜色

属性值:颜色名、颜色值

  1. 字体

  2. 字号 px为单位 表示显示多少像素;百分比为单位参考的是继承字号的百分比;em为单位表示继承字号的几倍

  3. 行高 line-height

  4. 字体加粗 font-weight

  5. 字体样式 font-style

文本属性

  1. 缩进 text-indent

  2. 对齐 text-align

  3. 修饰:text-decoration none overline line-through underline

盒模型的五个属性:width height padding内边距 border边框 margin外边距

清空默认样式margin:0;padding:0;list-style:none etc…

盒子必须有高度。否则看不到内容的样式。高度可以有多个配置内容,比如超出部分

如果盒子没有设置高度,则被内容撑高。设置了高度,不会被隐藏,会自动超出盒子内容

image.png

相关文章

  • css常用属性初解密

    这里学习记录前端css常用属性

  • CSS学习记录

    CSS基本结构 选择器 作用:选择页面上的某一个或者某一类元素 标签选择器 类选择器 形式:.calss的名称{}...

  • css学习记录

    前端三层: Html结构层,从语义角度去搭建网页结构。Css样式层,从美观角度去修饰页面样式。Javascript...

  • CSS基础知识

    一.CSS基础 这一部分仅仅是Java学习中学的简单的CSS记录,还没有深入学习。 概念CSS,全称:Cascad...

  • css概要

    本系列文章主要是学习 《css世界》的记录与总结 知识点主要 css2.1,不涉及css3 css2.1 开始由I...

  • CSS样式学习记录

    CSS 属性样式 letter-spacing 属性 letter-spacing 属性增加或减少字符间的空白(字...

  • CSS/javaScript 学习记录

    1、box-shadow 添加阴影2、针对absolute/relative的理解3、Flex布局可以纵向平均分布...

  • CSS flex学习记录

    推荐学习网站:http://flexboxfroggy.com 属性: justify-content:flex-...

  • CSS动画学习第一篇

    最近闲来无事学习了下CSS3的一些动画特效,记录下自己学习css动画的历程。第一个CSS动画。 代码如下:

  • 自学JavaScript之路前记

    HTML5+CSS3正在学习中,现在大一后续会记录HTML+CSS3的笔记。学习JavaScript是前端必学的语言。

网友评论

      本文标题:css学习记录

      本文链接:https://www.haomeiwen.com/subject/sqzxirtx.html