css基本样式与元素选择器

  1. 什么是css?
    css是 cascading style sheets的缩写,是一种用来为html文档添加样式(字体,间距,位置,颜色,角度等显示的效果)的计算机语言;
    HTML是内容的展示,css是内容的装饰

  2. css的引用方式
    行内样式
    在开始标签的内部可以设置一个叫style的属性,属性的双引号内存放该元素代码的css样式
    内部样式
    在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码
    外部样式
    在head标签中间新建一个link标签,通过href属性设置外部css文件地址
    rel是rslationship的缩写,(指定当前文档与被链接文档的关系)
    rel="stylesheet"表示引用的是一个样式表[css]文件
    例:

  3. css的基本格式
    元素/标签命名的基本格式
    class命名: 谁都可以取,可以取任意次
    例:


    ID命名:只能是唯一的,一旦被使用了一次,其它再也不能用
    例:

class命名的元素使用: .+元素名称,来找到一个元素
id命名的元素使用: #+元素名称,来找到一个元素
直接写上标签的名称如:h1,div,p等也可以找到元素

  1. 常用样式类别
    尺寸样式: 宽: width; 高: height;
    位置样式: 水平位置: margin-left [左边]; margin-right [右边]
    垂直位置: margin-top [上边]; margin-bottom [下边]
    装饰样式: 元素颜色: background-color
    文字样式: 文字大小: font-size
    文字字体: font-family
    文字颜色: color
  2. 常用复合选择器的使用
    –交集选择器: 由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
    –并集选择器: 是各个选择器通过逗号连接而成的
    任何形式的选择器( 包括标签选择器,class类选择器id选择器等),都可以作为并集选择器的一部分.如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的css样式
    –后代元素选择器: 后代元素选择器是一个空格,空格前后各有一个选择器
    作用: 找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素
    –子代元素选择器: 是一个大于号,大于号前后各有一个选择器
    作用: 找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素
    –相邻选择器: 是一个+号
    作用: 找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素
    –兄弟元素选择器: 是一个~号
    作用: 找到号前的选择器所选中的元素紧跟其后所有符合号后的选择器选中的元素
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值