CSS(一)

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  • class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。
  • 除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。如:         h3{color:red;}
  • 当样式需要应用于很多页面时,外部样式表将是理想的选择。
  • 6a41b904449e463ab03fc1a153ea7ebb.png

 样式表应该以 .CSS 扩展名进行保存。

  • <style> 标签在文档头部定义内部样式表
  • background-color 属性定义了元素的背景颜色。默认值为transparent(透明)
  • background-image 属性描述了元素的背景图像.默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。
  • 对背景图像进行平铺,可以使用 background-repeat 属性。
  • 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
  • c0db31a112a24dec8fd9b65ee5ae5c22.png
  •  如果你不想让图像平铺,你可以使用 background-repeat 属性
  • f4ecde17df90481c85596454e73c225f.png
  • 可以利用 background-position 属性改变图像在背景中的位置:
  • 42652cf712a54e438165db8e49a9386d.png
  •  background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或 5cm;最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
  • Text Color颜色属性被用来设置文字的颜色。
  • 文本可居中或对齐到左或右,两端对齐.当 text-align设置为justify,每一行被展开为宽度相等,左,右外边距是对齐
  • e41380b81a9e4207b880abe78ebf9230.png
  •  text-decoration属性用来设置或删除文本的装饰。从设计的角度看 text-decoration 属性主要是用来删除链接的下划线。
  • 76af27a6a1e34f8cafd685a17ffbc02a.png
  •  文本缩进属性是用来指定文本的第一行的缩进。CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
  • word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal与设置值为 0 是一样的。
  • color设置文本颜色
  • direct 设置文本方向
  • letter-spacing设置字符间距
  • line-height 设置行高
  • text-align对齐元素中的文本
  • text-decoration向文本添加修饰
  • text-indent 缩进元素中文本的首行 
  • text-shadow 设置文本阴影
  • text-transform控制元素中的字母
  • unicode-bidi设置或返回文本是否被重写
  • vertical-align设置元素的垂直对齐
  • white-space设置元素中空白的处理方式
  • word-spacing设置字间距
  • 3aa000c32e7f4f8192e0149b6fa6402c.png
  •  a:hover 必须跟在a:link 和 a:visited 后面
  • a:active 必须跟在 a:hover 后面
  • text-decoration 属性主要用于删除链接中的下划线
  • 930ae28c9dc54697a46ba583e93efe63.png
  •  list-style-type 属性指定列表项标记的类型是
  • a8e0a8bcfdf147afb1326d3613825f0f.png
  •  利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
  • 为了显示一个表的单个边框,使用 border-collapse属性。
  • 双边框为border 
  • border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
  • width 和height 属性定义表格的宽度和高度。
  • 如果在表的内容中控制空格之间的边框,应使用 td 和 th 元素的填充属性用padding 
  • dc34106cfd80422982bcbf2d5cd6d7f6.png
  •  最终元素的总宽度计算公式是这样的:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 元素的总高度最终计算公式是这样的:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
  • 1c55e380b0b5402aa5ae7ef18c7028b7.png
  •  通过 border-width 属性为边框指定宽度。
  • 6ada36cc2fee45b1805b9fb37643cd11.png
  •  Padding(填充)属性定义元素边框与元素内容之间的空间
  • padding 属性的百分比数值是相对于其父元素的 width 计算的,如果改变了父元素的 width,则它们也会改变
  • padding:25px 50px 75px 100px;
  • 为上右下左
  • display 属性设置一个元素应如何显示,visibility 属性指定一个元素应可见还是隐藏。
  • visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间
  • display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。
  • 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非事先设定 position 属性。
  • static 定位的元素不会受到 top, bottom, left, right 影响。
  • fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
  • relative 定位元素的定位是相对其正常位置。它原本所占的空间不会改变
  • absolute 定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 <html>
  • CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。
  • 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素
  • 块元素可以把左,右页边距设置为"自动"对齐。使用margin:auto
  •  
 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值