前端基础学习之CSS样式

CSS样式

CSS背景

  • background-color为元素设置背景色,该值接受任意一个合法的颜色值,如果不设置,则默认为transparent透明色
  • background-image为元素设置背景图片,属性的默认值为none,表示元素上不放置任何图片
  • backgroung-repeat可以为元素的背景图片实行平铺,属性值repeat表示在水平和竖直方向上进行平铺操作,属性repeat-x表示在水平方向上进行平铺,repeat-y表示在竖直方向上进行平铺
  • background-position为元素的背景图片进行定位,

    • 关键字属性值包括center,表示背景图片居中显示,其中还包括toprightleftbottom,其中,如果属性值指定为top的话,其真实表示位置为上方中部,也就是说,如果只指定一个属性值,则另一个都是默认为center,如果想要表示为左上角,则需要设置属性值为 top left
    • 百分比,background-position : 50% 50%; 百分比数值用来表示图片在整个布局中的具体位置所占百分比,上面的例子就是表示位置居中显示
    • 数值:background-position : 50px 50px; 其中的数值表示背景距离左边和上边的距离大小,上面的例子表示背景图片距离左边 50像素,距离上边50像素
  • background-attachment 表示背景关联:如果文档很长,在滚动的时候,背景会随着屏幕的滚动而滚动,如果需要固定住背景的话,设置属性值为fixed就不会随着屏幕的滚动而滚动了

CSS文本

  • text-indent表示文本缩进,可以为所有元素的第一行文本进行给定数值的缩进,该值可以为负值,

    代码示例:

    p {text-indent: 5em;}
    

    表示文本缩进5个相对单位,其中em表示相对单位,如果一个字体大小为16px,那个5em就表示 5 * 16 px个像素值

    • 百分比缩进 p {text-indent: 20%;}表示缩进值为父文本的20%,
  • text-align 设置文本行之间的相互对齐方式,属性值分别包括left,right,center,其中justfy是设置两端对其,系统会自动调整单词里面的间距来保证每行文字的两端对其

  • word-spacing 改变字(单词)之间的标准间隔
  • letter-spacing 改变字符或字母之间的间隔
  • text-transform 字符转换,用来处理文本的大小写,属性值包括 uppercase:大写、lowercase:小写、capitalize:每个单词的首字母大写
  • text-decoration 文本装饰,属性值包括underline:下划线、overline:上划线、line-through:删除线、blink:文本闪烁
  • white-space 处理空白字符,对源文档中的空白符,空格,tab键进行处理
  • direction 设置文本的文字方向
    注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
    direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。

CSS字体

  • font-family 定义文本的字体
  • font-style 定义字体风格 normal:正常 、italic:文本斜体显示、oblique:文本倾斜显示
  • font-variant 定义字体变形 可以设定小型的大写字母,
  • font-weight 定义字体加粗
  • font-size 定义文字大小

CSS链接

链接共有四种样式分别为

  • a:link 普通的,未被访问的链接
  • a:visted 用户已访问的链接
  • a:hover 用户鼠标悬停在连接上方
  • a:active 用户鼠标被点击的时刻

注意:当为链接设置不同的样式的时候,一定要遵循如下的顺序
a:hover必须要在a:link和a:visited之后
a:active必须要在a:hover后面

代码示例:

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

CSS轮廓

  • outline:设置所有的轮廓属性
  • outline-color:设置轮廓颜色
  • outline-style:设置轮廓样式
  • outline-width:设置轮廓宽度

猜你喜欢

转载自blog.csdn.net/u014697083/article/details/76187222