[HTTP/CSS学习日常]CSS基础

内联:
<span style="color:red;font-size:10px;" >
  text
</span>

嵌入:
<style type="text/css">
  span{
  color:red;font-size:10px;
  }
</style>

外部:
<link href="style.css" rel="stylesheet" type="text/css">
其中 rel 属性用于定义链接的文件和HTML文档之间的关系。StyleSheet,的意思就是样式调用。

外部 <link> 标签位置一般写在 <head> 标签之内。

选择器{样式;}                               标签的权值为 1,类选择符的权值为 10,ID选择符的权值最高为 100
.类名{css样式代码;}              <!--类选择器-->
<span class="类名">胆小如鼠</span>
#ID名{css样式代码;}              <!--ID选择器-->
<span id="ID名">公开课</span>

.food>li{border:1px solid red;} <!--子选择器-->
.food li{border:1px solid red;} <!--后代(包含)选择器-->
* {border:1px solid red;}       <!--通用选择器-->
a:hover{color:red;}             <!--鼠标滑过体颜色变为红色-->

1.文字

font-weight
  文字粗细程度,可取:
  normal ,bold 或 数字
color
  文字的颜色,可取:
  #0000ff , rgb(255,0,0) , rgba(255,0,0,0.5)<!--多一位透明度--> 或 颜色名
text-align
  文字水平对齐方式,可取:
  center , left , right
font-family
  字体,可取:
  宋体 , 华文彩云 , Microsoft Yahei
font-size
  字号,可取:
  12px
font-style
  字体样式,可取:
  italic 斜体 , 
text-decoration
  划线,可取:
  underline 下划线 , line-through 删除线
text-indent
  首行缩进,可取:
  2em 2个字符
line-height
  行高
  1.5em 1.5个字符
letter-spacing、word-spacing
  分别为字母之间的间距、单词之间的间距,后者对汉字不起作用,可取:
  3px

2.边框

border:5px solid red;  
  按顺序设置如下属性:  
border-width  
  线宽,可取:  
  thin medium thick 10px    细边框 中等边框 粗边框 10px  
border-style  
  线的样式,可取:  
  dotted solid double dashed    点状 实线 双线 虚线  
border-color  
  线的颜色,可取:  
  #0000ff , rgb(255,0,0) ,rgba(255,0,0,0.5)<!--多一位透明度--> 或 颜色名  

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值