【css基础学习一之css选择器和css字体样式、外观属性】

css
1.css书写位置
内部样式表
<head>
<style type="text/css">
  选择器 {属性1:属性值1;属性2:属性值2}
</style>
</head>

行内式
<div style="width:400px;height:300px"></div>
<div width="400px" height="300px"></div>

外部样式表(引入)
<head>
  <link href="css文件的路径" rel="stylesheet"/>
</head>

2.css选择器
标签选择器
<style>
   h1 {
    font-size:25px;
       color:red;
}
</style>

类选择器(.)
<style>
   .mydiv {
    width:300px;
       height:200px;
    background-color:pink;
}
</style>
<div class="mydiv"></div>

多类名选择器: 用空格隔开
<div class="mydiv mydiv1 mydiv2">

ID选择器(#)
<style>
   #mydiv {
    width:300px;
       height:200px;
    background-color:pink;
}
</style>
<div id="mydiv"></div>

类选择器和Id选择器的区别:类选择器好比人的名字,是可以重复使用的,而id好比身份证号是唯一的,只能使用一个
它两最大的区别在于使用次数上

通配符选择器
*{
  margin:0;
  padding:0;
}

3.css字体样式属性
 font-size:25px;(字体大小)
 font-family(字体)
 p{font-family:"微软雅黑"}
 font-weight(字体粗细) 400===normal 700===bold
 font-style(字体风格) normal/默认值,浏览器会显示标准的字体样式
              italic/浏览器会显示斜体的字体样式


 font:综合设置字体样式(重点)
 选择器{font:font-style font-weight font-size/line-height font-family;}
 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
 注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

4.css外观属性
 color:文本颜色(red/#ccc/rgb(255,0,0))
 line-height:行间距
 text-align:设置文本内容水平对齐 center:居中  left:左对齐(默认值) right:右对齐
 text-indent:首行缩进  (text-indent:2em 首行缩进两个汉字)
 text-decoration 文本装饰 none:没有下划线  underline:下划线

5.css复合选择器
交集选择器(并且)
交集选择器由两个选择器构成,第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
h3.class{color:red;font-size:25px;}
p.one 选择的是 类名为.one 的段落标签

并集选择器:用逗号隔开
.one ,p,#test{color:#ccc;}

后代选择器:用空格隔开
.class p{color:#ccc;}

子代选择器:用>连接
.demo >h3 {color:red;} 说明h3一定是demo的亲儿子

伪类选择器(伪类用的是两个点 冒号 :link{})

链接伪类选择器
:link  未访问的链接
:visited 已访问的链接
:hover   鼠标经过时
:active  选定的链接


 


 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值