前端学习之CSS入门

最新推荐文章于 2024-10-10 01:16:57 发布
最新推荐文章于 2024-10-10 01:16:57 发布
阅读量139 收藏
点赞数
分类专栏： 自学进度 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxfsyl/article/details/109997447
版权

        这几天正巧碰上好多事，只能断断续续的学习，并且确实也懈怠了不少。自学么，总是会碰到各种问题的，不能全身心的投入到学习中去，进度也比较慢，更多的要靠自己的自控能力，所以说，没有自制力的人还是要报班学习啊。而我呢，就是想挑战下自己，并且锻炼下自己。加油吧！

        用了快两周多的时间才更新，下一步我要端正下自己的态度了！

        以下是我CSS的学习笔记！

CSS学习笔记

css是层叠样式表的简称，有时我们也会叫CSS样式表或级联样式表。

CSS也是标记语言

CSS主要用于设置HTML页面中的文字的大小，字体，样式，对齐方式等，图片形状以及页面的布局和外观显示样式。

CSS最大的价值是：由HTML专注去做结构呈现，样式交给CSS，即结构HTML与样式CSS相分离。

CSS由两部分组成：选择器以及一条或者多条声明

语法规范

  1. 选择器是用于指定CSS样式的HTML标签，花括号是对该对象设置的具体样式
  2. 属性与属性值之间以“键对值”的形式出现
  3. 属性是对指定对象设置的样式属性，例如字体大小，颜色等
  4. 属性与属性值之间用英文: 隔开
  5. 多个键对值之间用英文 ;  隔开

CSS选择器的作用是用来选择标签的

选择器可分为基础选择器和复合选择器两类

基础选择器是由单个选择器组成

基础选择器包括：标签选择器，类选择器，ID选择器和通配选择器

<head>

<style>

 

</style>

</head>

标签选择器是指用HTML作为选择器，按照标签名称分类，为页面中的某一类标签指定的统一的CSS样式。

类选择器可以单独选一个或某几个标签:结构需要用class属性

<div class=”某名称”>变红色</div>

口诀：样式点定义，结构类（class）调用

      一个或多个，开发最常用

多类名选择器：1.个各类名之间用空格隔开 2.节省CSS代码，统一修改比较方便

这个标签可以分别具有别的类名

   .box {

            width: 150px;

            height: 100px;

            font-size: 30px;

        }

 

ID选择器

HTML元素以ID属性来设置ID选择器，CSS中ID选择器以”#”来定义。

口诀：样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 

    #pink {

          color: pink;

      }

通配选择器

* 这里把 html  body  div  span  li 等等的标签都改为了红色 *

 

CSS字体属性

  1. 各种字体之间必须用英文,隔开
  2. 一般情况下，如果有空格，用””隔开
  3. 尽量使用系统自带紫天 比如Microsoft yahei 微软雅黑
  4. 最常见的字体Microsoft yahei   tahoma   afial  Hiragino Sans GB

     h2 {

            font-family: '微软雅黑';

      }

 

文字大小

   body {

            font-size: 16px;

        }

        /* 标题标签比较特殊,需要单独指定文字大小 */

        h2 {

            font-size: 16px;

        }

字体属性 加粗

 .bold {

           /* font-weight: bold; */

           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */

           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */

           font-weight: 700;    

       }

       h2 {

           font-weight: 400;   

           /* font-weight: normal;    */

       }

700是加粗 400是变细

Normal 不加粗的

Bold    加粗

文字样式

   p {

          font-style: italic;

      }

      em {

          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */

          font-style: normal;

      }

复合属性

div {

           /* font-style: italic;

           font-weight: 700;

           font-size: 16px;

           font-family: 'Microsoft yahei'; */

           /* 复合属性: 简写的方式  节约代码 */

           /* font: font-style  font-weight  font-size/line-height  font-family; */

           /* font: italic 700 16px 'Microsoft yahei'; */

           font: 20px '黑体';

       }

使用复合属性时，千万不能更换顺序  斜体 加粗 字体大小  字体

不需要的属性可以省略  但是不许保留font-style 和font-family属性  否则不起作用

CSS文本属性

Css Text属性可以定义文本的外观，比如文本的颜色，对齐文本，文本缩进，行间距，文本装饰

文本颜色

  div {

           /* color: deeppink; */

           /* color: #ff0000; */

           color: rgb(255, 0, 255);

       }

对齐文本

    h1 {

            /* 本质是让h1盒子里面的文字水平居中对齐 */

            /* text-align: center; */

            text-align: right;

        }

装饰文本

     div {

           /* 下划线 */

           /* text-decoration: underline;   */

         /* 删除线 */

           text-decoration: line-through;

           /* 上划线 */

           text-decoration: overline;

 

       }

       a {

           /* 取消a默认的下划线 */

           text-decoration: none;

           color: #333;

       }

其中，取消下划线是取消链接的下划线

一个刚入门的小码农
关注
专栏目录
前端学习之CSS
weixin_44362089的博客
10-20 2790
前段端学习之CSS,层叠样式表，HTML，三种方式
【前端学习】CSS入门
woodwhale的博客
04-08 4022
前端学习：CSS入门 前言 在学习过HTML后，我们就可以开始前端学习的更进一步了——CSS。那么什么是CSS呢。我们可以参考一下百度百科对CSS的解释，如下图所示： 在了解了CSS的内涵之后，我们开始对它的学习！ 注意，这篇文章不含任何框架的知识，仅仅是对原生css进行学习！ 1、class01 1.我的第一个CSS 我们如何写css代码呢？有两种方式： 1、直接在html的<head>标签中写<style>标签,其中就是css代码 2、在html的<head>标签中
HTML认识与入门
weixin_44596128的博客
10-11 952
什么是HTML HTML Hyper Text Markup Language（超文本标记语言） HTML基本结构 <html> <!-- head:网页头部 --> <head> <title>我的第一个网页</title> </head> <!-- body:主体部分 --> <body> 我的第一个网页 </body> </html> 注意: <bod
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端基础入门之css less
LoveSummer
06-20 7983
是一门的预处理语言在中搜索，点击html 代码使用快捷方式创建代码生成代码 less 代码创建文件，编写代码 插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码 我们直接在 HTML 中引入生成的 运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被解析到文件中 父子关系嵌套 在中，父子关系可以直接嵌套 对应的 变量 变量，在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法： 生成的代码 注意：在中使用语法需要用引号包裹 生成的代码 拼
前端基础入门之css定位 position
LoveSummer
06-21 1万+
需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现 我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属
前端的学习-CSS（弹性布局-flex）
m0_68823256的博客
08-02 2372
CSS的定位-给父元素设置的属性
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 7万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
前端html+css+js常用总结快速入门
showy0的博客
04-04 1959
学习前端全套所有技术性价比低下且容易忘记，先入门学会所有基础的语法（css+js+heml），常用示例，再根据项目上手练习，哪里不会查哪里是最好的学习方式
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端css学习入门资源
02-24
在前端开发领域，CSS（Cascading Style ...通过这些资源，学习者可以系统地学习并实践CSS，为成为合格的前端开发者打下坚实基础。在学习过程中，理论与实践相结合，多做实验，不断尝试，将能更快地掌握这门语言的精髓。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
web前端基础——CSS入门
01-20
本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性以及标签显示模式。 1. CSS的引入方式： - 内部样式：直接在HTML的`<head>`标签内的`<style>`标签中编写CSS代码，这样样式只应用...
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1390
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 632
【代码】CSS彩虹按钮设计demo。
CSS——文字打字机效果
懒羊羊大王的博客
10-06 1564
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
CSS弹性布局
2401_82561004的博客
10-09 1207
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex布局。
【CSS3】css开篇基础（2）
最新发布
Easonmax的博客
10-10 915
常见的行内元素有、、、、、、、、、等,其中标签是最典型的行内元素。常见的块元素有~、、、、、等,其中 标签是最典型的块元素。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页，这时候就要用到元素显示模式。子元素选择器是 CSS 中的一种选择器，用于选择某个元素的直接子元素。
前端开发学习笔记：CSS基础入门
"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发工程师》课程的学习笔记，由西风潇潇编写的，主要介绍了CSS的基本概念、历史以及如何在HTML中引用CSS样式。笔记中提到了CSS用于定义HTML内容的显示样式，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值