css

Posted 上山打老虎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css相关的知识,希望对你有一定的参考价值。

css概述

 

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 html 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

一.样式

1.行内样式

<p   style="color:red">你好</p>

-----定义在body某行内

2.内部样式

<style type="text/css">

p{  color:bule  }

</style>

-----定义在head中

3.外部样式

p{  color:bule  }-----写在css文件中

<link  rel="styleSheet"  href="css/xx.css">-----写在head中

------在建立css文件时文件名要与相关的html名一致,方便区分

 

二.选择器

1.元素选择器

如:  p{ color:red }

2.id选择器

#id值{}  如: #t1{color:red}

3.类选择器

.class值{}  如: .city{color:red} ----如果有多个,用‘,‘隔开,群组选择

4.通配选择器

*{}    如:*{color:red}------所有字体都为红色

5.包含选择器

#d1 h1{color:red}----定义在css/head内

<div id="d1">

  <h1 >你好</h1>-----body 内

</div>

#d1> h1{color:red}------子元素选择

#d1+ h1{color:red}-------兄弟(弟弟)元素选择

6.伪类及伪类选择器

a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
7.选择器优先级
!important > id > class > element(元素) > 伪类

三.属性
作用:用于指明格式
1.长度单位
 a.绝对长度:cm、mm、in
 b.相对长度:px、em
  em:用户的浏览器默认渲染的文字大小是“16px”,弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比如“1.365em”
1em=16px

2.颜色单位

  a.用百分比值表示:  color:rgb(50%,0,50%)

  b.用简化十六进制数定义:  #80

  c.为颜色取名: red 、green

3.字体属性

  a.   font-fimally-----字体

  b.   font-size-----字体大小  如: font-size=“30px”

  c.   font-style-----设置字体风格。

  d.   font-weight-----设置字体的粗细。

4.文本属性

  a.  color----设置文本颜色

  b.  line-heigh----设置行高

  c.  indent----缩进元素中文本的首行。

  d.  transfrom----控制元素中的字母。

 

      h1 {text-transform:uppercase}----全大写
    h2 {text-transform:capitalize}----首字母大写
    p {text-transform:lowercase}----全小写
  e. decoration-----向文本添加修饰。
  overline 上划线
  underline 下划线
  line-through 中划线
 

 

以上是关于css的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)

CSS代码片段

CSS代码片段