CSS--网页的样式美化

本文详细介绍了CSS样式的引入方式,包括内部样式表、内联样式和外部样式表,并讨论了各种选择器的使用,如标签选择器、ID选择器、类选择器和伪类选择器,特别提到了CSS3的新选择器。此外,还涵盖了常见的CSS样式属性,如文本、背景、边框和列表属性,以及CSS3的阴影效果和多背景图片处理方法。
摘要由CSDN通过智能技术生成

css样式表的几种引入方式

  1. 内部样式表:不用通过引入css文件来设置样式,直接在head的< style>双标签中设置。
  2. 内联样式表(行内样式):在HTML中,直接将样式属性写在标签上,优先级高于其它所有方式设置的样式,加了!important的除外。
  3. 外部样式表:通过引入外部css文件设置样式,引入方式有两种,一种是通过link标签
    < link rel=“stylesheet” type=“text/css” href=“xxx.css”/>
    一种是在head的< style>双标签中引入
    < style>
    @import url(xxx.css);
    </ style>
    这一种引入方式引入的css文件不会和HTML文件同时加载,很慢,所以一般都用link的方式引入。

css的几种常用选择器

css既然能设置元素的样式,那么首先一点就要通过某种方式将样式与元素关联起来,而起到关联作用的就是选择器

  • 标签选择器: 标签名{样式属性} 权重为1
  • id选择器: #id名{样式属性} 权重为100
  • 类选择器: .类名{样式属性} 权重为10
  • 群组选择器: 可设置多个选择器,用逗号隔开,这些选择器共用一些样式,权重各算各的
  • 包含选择器 选择器间存在包含关系,空格隔开,比如div标签里有一个id为xx的元素,就可以通过 div #xx{样式属性}来选择到这个元素给它设置属性,权重为包含关系中涉及到的所有选择器权重之和
  • 通配符选择器:*{样式属性},对页面上所有元素生效的样式设置,权重为0
  • 伪类选择器:首先说一下我对伪类的理解,伪类字面意思拆开就是伪和类,就是抽象的一种分类,一般类的区分是根据元素一些客观存在的特点分类,比如说我这里要设置一行关于商品的标签,那么就可以分为商品类,通过类选择器来选中有商品这个类名的元素统一设置商品类特有的样式,而伪类的存在就是为了给一些抽象的,动态的分类来设置样式。
    这里以a标签的伪类选择器为例
    a:link{} a标签在未被访问过情况下的样式
    a:visited{} a标签在被访问后情况下的样式
    a:hover{} a标签在鼠标滑过或悬停时的样式
    a:active{} a标签在鼠标点击时的样式
    从上面分析,这种基于用户动态操作的分类,只能通过伪类选择器来实现,伪类选择器权重为10,与类的选择器一样。

css3新增选择器:

	属性选择器:权重10 拿a标签来举例
	a[title] {样式属
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值