CSS基础--常用样式

一、背景相关
  • 背景颜色      

background-color :颜色名称/rgb值/十六进制值

  • 背景图片      

background-image :url(‘‘)

  • 背景图片平铺方式  

background-repeat : repeat-x(仅水平平铺) repeat-y(仅垂直平铺) no-repeat(不平铺)

  • 设置背景图片位置  

background-position :  数字+单位/center/top/bottom/left/right 同上。 例如:50px 50px

  • 背景图片是否滚动  

background-attachment :  fixed(不滚动) scroll(滚动)

dmeo:

设置页面的body背景:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
    body{ background-color: aquamarine;
         background-image: url("cool.jpeg");
         background-repeat:repeat-y ;
         background-position: top;
         background-attachment: fixed;

    }
</style>
<body>
</body>
</html>
二、边框

边框:border

用法:

border: 1px solid red;  表示边框宽度(border-width)为1px,边框样式(border-style)为实线,边框颜色(border-color)为红色
其中常用的边框样式有:solid 实线 dashed 虚线 dotted 点线

border表示全部设置,单独设置边框上/下/左/右边框将border替换为border-top、border-bottom、border-left、border-right。

时间: 2024-10-22 03:14:51

CSS基础--常用样式的相关文章

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐

css基础--常用css属性02

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向

CSS文本常用样式

1.常用的应用文本的CSS样式: color设置文字的颜色 font-size 设置文字的大小,如font-size:12px font-family 设置文字的字体,如font-family:'微软雅黑' font-style 设置文字是否倾斜,如font-style:'normal',设置不倾斜,'italic'设置文字倾斜 font-weight 设置文字是否加粗,如font-weight:bold,设置加粗,normal,不加粗 line-height 设置文字行高,相当于在每行文字上下

CSS之常用样式

1.对背景.文本的操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;

css基础:样式属性

1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左

css的常用样式

1.边框属性(默认边框不可见) (1)border 设置边框的样式 格式:宽度 样式 颜色 线条样式:solid 实线,none 无边,double 双线 (2)width 用于设置标签的宽度 格式: width:300px: (3)height 用于设置标签的高度 格式; height:300px (4)background-color 用于设置标签的背景颜色 背景颜色设置的两种主流方式: ①英文单词 例如:red,blue,yellow ②颜色代码 格式#红绿蓝,每个颜色用两个16进制位数表

CSS一些常用样式

限制行数溢出省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

css尺寸常用样式

white-space:nowrap; 控制容器内的文本,不允许换行. min-width:最小宽度 当内容宽度小于最小宽度时,容器的宽度等于最小宽度. 当内容宽度大于最小宽度时,容器的宽度等于内容宽度. max-width:最大宽度 当内容宽度小于最大宽度时,容器的宽度等于内容宽度. 当内容宽度大于最大宽度时,容器的宽度等于最大宽度,并且内容溢出. height:当内容高度超出height指定高度时,内容溢出. min-height:最小高度 特性与最小宽度一致 max-height:最大高度