首页 > 其他分享 >基础课-前端CSS

基础课-前端CSS

时间:2023-11-07 11:33:04浏览次数:31  
标签:标记 前端 css 基础课 编写 选择器 CSS 属性

CSS基础语法

CSS的作用:让前端界面美化

CSS代码的编写位置:1.嵌入编写:CSS代码可以嵌入中HTML一个特殊标记style里,style标记必须是head的子标记

                                     2.外部编写:CSS代码单独编写在后缀是.css文件中,如果某个HTML需要使用CSS代码文件中的样式,就需要使用link标记引入CSS文件,link标记必须是head的子标记

外部编写使用较多

CSS语法:

1.嵌入编写语法:选择器选择到需要样式控制的标记

<title>Document</title>

①.标记选择器

选择器{

具体样式属性设置:

属性名:空格 属性值;

......

}

</style>

②.类选择器

<style>

.名字{

属性名:空格 属性值;

}

</style>

嵌入编写选择器分类:

1.标记选择器:名字就是某一种标记的名字,它可以一次选择多个相同类型的标记

2.类选择器:名字前必须加.,名字自定义不能数字开头,它可以一次选择多个不同类型的标记

如果某个标记被类选择器选择到,那么这个标记必须设置class属性(在尖括号标记中后加空格加class,双引号内写名字)

类选择器使用较多

2.外部编写语法

首先创建一个.css文件,文件中用类选择器进行编写,其次在.html文件中head子标记中tittle下用link标记(<link rel="stylesheet" href="">),将href中双引号内容改为需要跳转的.css文件的地址(例如:./CSS外部编写.css);body标记中写需要改变的标记(注意要加class="类选择器的名字",例如:<h2 class="XXL">HFR</h2>)

 

标签:标记,前端,css,基础课,编写,选择器,CSS,属性
From: https://www.cnblogs.com/hefury/p/17814655.html

相关文章

  • 快速排序——acwing算法基础课笔记
    课堂内容+个人思考,个人笔记,但是欢迎补充、批评、指正。快速排序基于分治的思想平均时间复杂度O(nlogn)已知数组q[] 步骤:1、确定分界点(x): (1)首元素q[l];(2)尾元素q[r];(3)中值q[(l+r)/2];(4)随机;2、调整区间将区间通过x值划分为两部分(长度不一定相等),使得第......
  • 前端处理大文件/视频分片上传,断点续传
    1、html部分,项目使用的是ant-design-vue组件库;spark-md5进行加密上传  2、使用变量:(通过上传成功的分片数与总分片数对比判断上传是否完成)  3、主要方法:1、查询当前文件是否上传  2、获取文件的MD5编码//获取文件的MD5编码computedSlice......
  • CSS3 实现动态旋转加载样式
    CSS3实现动态旋转加载样式要使用CSS3创建一个动态旋转加载样式,你可以使用CSS动画和旋转变换。下面是一个简单的示例:HTML:<divclass="loader"></div>CSS:.loader{width:50px;height:50px;border:4pxsolid#3498db;border-top:4pxsolidtransparent;......
  • 助教工作10月总结(前端开发技术)
    一、助教工作的具体职责和任务作为前端这门课程的助教主要的职责是辅助老师完成在课外的一些教学任务例如 1、课下的疑难解答 :课下辅导中,我通过QQ私聊等方式与学生进行沟通,并帮助他们解决在学习过程中遇到的困惑和问题。我会提供适当的指导和建议,引导学生找到解决问题的方法和......
  • CSS--属性、选择器
    CSS导入的三种方式 内联样式使用较少,内部样式和外部样式使用较多CSS选择器 元素选择器 id选择器 类选择器 ......
  • CSS选择器
    元素选择器/*使用元素选择器为所有段落元素应用样式*/p{color:blue;font-size:16px;text-align:center;margin:10px;padding:5px;background-color:#f0f0f0;}类选择器/*使用类选择器为具有类名"important"的元素应用样式*/.important{f......
  • vue 2 升级vue3 前端老白
    vue2升级vue3前端老白原文链接:Vue3已经发布,而Vue2到Vue3的升级需要一些注意点。本文将介绍Vue2升级到Vue3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级VueCLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中输入以下命令:npminst......
  • 若依前端项目理解&官方文档学习
    若依前端项目理解&官方文档学习:https://blog.csdn.net/u010657801/article/details/129441209?ops_request_misc=&request_id=&biz_id=102&utm_term=%E8%AF%BA%E4%BE%9D%20%20filterAsyncRouter&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduw......
  • CSS让子元素div的高度填满父容器的剩余空间的方法
    原帖:https://pythonjishu.com/unbayyjtzdjeewe/以下是详细讲解CSS让子元素div的高度填满父容器的剩余空间的方法的完整攻略。方法一:FlexboxFlexbox是一种强大的布局方式,使用起来非常方便。可以通过设置父元素的display属性为flex来开启flexbox布局,然后设置子元素的......
  • celery flower通过nginx部署 静态文件css js
    nginx添加以下配置  location/flower{proxy_passhttp://127.0.0.1:5555;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded......