Java基础 —— CSS

CSS:层叠样式表(Cascading Style Sheets) --> 提高显示功能,定义样式

html提供了div与span,只为了封装文本数据,div为一行数据,span为行内的数据。

  • CSS与HTML结合方式:
    • 使用html标签中的style属性:<div style="color:red;font:..;size:24px;background-color:blue;">...</div>
      • 使用style标签提高代码复用性:
        • <style> div{样式;...} </style>
        • 或者<style type="text/css"> @import url(...); </style>
        • 或者<link rel="stylesheet" href".....css文件" type="text/css">
  • 选择器:
    • html标签名选择器:指定要加载样式的标签 div{...}(某一类标签)。
    • 类class属性选择器:使用的是标签中的class属性,专门给css提供操作的属性:
      • 对于标签<div class="haha">...</div>,可以如下修改:
        • <style type="text/css">
        • div.haha{...}
        • </style>
      • 对于有相同class的标签,如<span class="haha">...</span>,也可以使用如下语句:
        • <style type="text/css">
        • .haha{...}
        • </style>
    • id选择器:使用的是标签中的id属性,如div#qq{...}。在一般情况下,html标签中的id属性是唯一的,而且CSS与JavaScript都经常使用id属性。
  • 扩展选择器:
    • 关联选择器:div里面套有span标签,则写为:div span{...}。
    • 组合选择器:多重选择,如.haha.span,#qq,.xixi{...}多个选择使用相同的样式,中间用逗号隔开。
    • 伪元素选择器:比如超链接的四种状态,未访问,点击,悬停,访问后,即link,hover,active,visited四种,可以使用a:link{...}等指定某一种的样式。一般声明顺序为link --> visited --> hover --> active
  • 图文混排:图片标签#imgtxt{float:right;},使用的是绝对布局。

转载于:https://www.cnblogs.com/Bestsonic/p/4321836.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值