首页 > 其他分享 >学习CSS

学习CSS

时间:2024-03-12 18:59:57浏览次数:23  
标签:样式 标签 学习 CSS id 类名 属性

                                       基础认知

CSS的介绍

CSS:全称:Cascading Style Sheets,中文译为:层叠样式表

CSS的作用:给页面的HTML标签设置样式

                                     基础选择器

                                               标签选择器

                                   结构:标签名{CSS属性:属性值;}
 

                                                类选择器

结构:.类名{CSS属性:属性值;}

作用:通过类名,找到页面中的所有这个类名的标签,设置样式

注意点:1、所有上都有class属性;2、类名可以由数字、字母、下划线组成,但不能以数字或下划线开头;3、类名可以重复;4、一个标签可以有多个类名,类名之间以空格隔开

                                                  id选择器

结构:#id{CSS属性:属性值;}

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:1、所有上都有id属性;2、id属性值是唯一的,不能重复;3、一个标签只能有一个id属性值;4、一个id选择器只能选中一个标签

                                CSS的常见属性

属性名作用
color文字颜色
background-color背景颜色
wiidth宽度
height高度
font-style:italic;文字倾斜
font-family文字字体样式

font-size

(文字大小默认是16px)

改变文字大小
text-align:start;文字左对齐

text-align:end;

文字右对齐
text-align:center;文字居中对齐
text-weight:bold;文字加粗
line-height文字行高距
border-top设置上边框样式

border-bottm

设置下边框样式
border-left设置左边框样式
border-right设置右边框样式

border

同时设置四个边框样式
solid实线
dashed虚线
double双实线

标签:样式,标签,学习,CSS,id,类名,属性
From: https://blog.csdn.net/wslmh147/article/details/136655482

相关文章

  • java018学习记录
    JavaWeb前端+后端+数据库DBDataBase数据库是一个服务,启动服务才能使用,开机自动启动,存储业务数据关系型数据库,传统数据,主要的业务数据,MySQL、Oracle、SQLServer(C#)结构复杂、性能稳定、速度较慢非关系型数据库,MongoDB、Redis结构灵活、速度快,功能有限,查询次数比......
  • [Blazor] 学习随笔——RZ10012警告的处理
    程序能运行,就是告诉你RZ10012,然后各种提示没有了。清理解决方案、电脑重启了都没有用,后来搜索到github,解决了,记一下:关闭vs删除文件夹.vs,bin,object打开vs,重新生成解决方案也是醉了。文字少的博文不允许投稿到该网站分类?知道什么叫短小精悍吗?知道什么叫短小精悍吗?知道什......
  • 嵌入式系统学习札记系列
    目录写在前面目录一、课程学习——嵌入式技术基础与实践(第6版)写在前面本系列将收录我在学习嵌入式系统的实践过程、笔记心得,其内容以博客的形式呈现。(平时博客写的比较少,大家将就着看)目录一、课程学习——嵌入式技术基础与实践(第6版)嵌入式作业1.1嵌入式系统常用术语......
  • FineReport学习(二)——各种报表的制作
    行式报表:订单表 分组报表:销量表 交叉报表:销量表添加【小计】,一定要使用父子格,小计的“父子格”应该就是“产品”字段C2 添加右侧的合计,同样的操作,合计是按照销量求和,同时每一行的合计,又是针对每个【销售员】求和的,因此,合计的“父子格”应该就是“销售员”字......
  • 3/12学习进程
    大二学期第三周日报 第一天第二天第三天第四天第五天所花时间(包括上课) 210min90min   代码量(行) 350 200   博客量(篇) 1 1   了解到的知识点编写安卓增删改查,使用sqlite存储数据 验收增删改查,做个人......
  • 腾讯视频号直播卖货学习第十四课-直播时段
    腾讯视频号直播卖货学习第十四课-直播时段直播时段综合价值综合价值:晚上场>早场/凌晨场>其他场晚上场,18-22点最活跃时段UV最多互动最高交易主持适合中高客单商品早场,5-9点中老年场用户少但是竞争少低客单下量大 适合拉新凌晨场,23-4点,特定产品场【情感困扰,失眠晚睡......
  • java学习笔记(不定时更新!)
    (1)三元运算符: 运算式?输出结果1:输出结果2;(2)键盘录入: scannersc=newScanner(System.in){ inti=Scanner.nextInt(); doubled=Scanner.nextDouble(); Stringstr=sc.next(); }(3) 数组(长度固定,可存基本数据类型):数据类型【】数组名=new数据类型【】{元素1......
  • Java学习笔记——第十三天
    常用API(二)MathMath代表数学,是一个工具类,里面提供的都是对数据进行操作的一些静态方法。Math类提供的常用方法方法名说明publicstaticintabs(inta)获取参数绝对值publicstaticdoubleceil(doublea)向上取整publicstaticdoublefloor(doublea)向下......
  • scikit-opt学习笔记
    1.差分约束算法'''minf(x1,x2,x3)=x1^2+x2^2+x3^2s.t.x1*x2>=1x1*x2<=5x2+x3=10<=x1,x2,x3<=5'''defobj_func(p):x1,x2,x3=preturnx1**2+x2**2+x3**2c......
  • Vue学习笔记46--scoped样式 + less
    scoped样式<!--组件的默认样式css写法--><!--<stylescoped>.demo{background-color:cadetblue;}</style>--><stylelang="less"scoped>.demo{background-color:cadetblue;.myfontsize{font-size:40px;}......