分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

前端(2)CSS

发布时间:2023-09-06 01:42责任编辑:沈小雨关键词:CSS前端

css:
Cascading Style Sheet 层叠样式表——修饰、美化网页,化妆师
CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
行间样式 > 内嵌css样式 > 外链css样式(在style之前引入)
如果外链css样式在style之后引入,则外链css样式覆盖内嵌css样式,谁在后面以谁为准。
行间样式直接写在标签里:

<div style="width: 100px;height: 100px;background: bisque"></div>

内嵌css样式写在head的style里:

<style>div{  width: 100px;  height: 100px;  background: red;}</style>

外链css样式:

通过link标签,引用一个外部的css文件

<link rel="stylesheet" href="index.css">

基本选择器:

<style>/* *通配符选择器 匹配任何元素 */*{  margin: 0;  padding: 0;}/*元素选择器 选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/div{  width: 100px;  height: 100px;  background: red;}/* id选择器 给标签设置一个id属性,在写样式时,在id名字前面加个 # */#box{  width: 150px;  height: 150px;  background: bisque;}/* class选择器 给标签设置一个class属性,在写样式时,在class名字前面加个.一般给具有相同属性的元素设置同一个class */.box{  width: 120px;  height: 120px;  background: blueviolet;}</style>

复杂选择器:

<style>/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/div,p{  width: 120px;  height: 120px;  background: bisque;}/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/div ~ p{  width: 100px;  height: 100px;  background: blueviolet;}/* > 子代选择器 选择某个元素下面的子元素*/div > div{  width: 50px;  height: 50px;  background: blue;}/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/div + p{  width: 100px;  background: blueviolet;  height: 100px;}</style>

后代选择器:

<style>li{/*去掉li标签前面的东西*//*list-style: none;*/  width: 50px;  height: 50px;  background: bisque;}div ol li{  list-style: none;}</style> ???

伪类选择器:

<style>/*LoVe HAte*/a:link{/*link 未被点击的链接*/  color: red;}a:visited{/*已被点击的链接*/  color: blueviolet;}a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/  color: yellowgreen;}a:active{/*鼠标已经再其上按下但是还没有释放的元素*/  color: aqua;}div{  width: 100px;  height: 100px;  background: bisque;}div:hover{ /*改变的是div本身*/  background: blueviolet;  cursor: pointer;/*手指*/  cursor: help;/*帮助*/  cursor: wait;/*等待*/  cursor: default;/*默认*/}div:hover p{ !*改变的是p*!  width: 50px;  height: 50px;  background: blue;}a:link,a:visited,a:hover,a:active{  color: blue;  cursor: pointer;  /*去掉下划线*/  text-decoration: none;}</style>

选择器优先级:

1.先比id(最高位)   class(中间位) tagName(个数位)
???????????    1     ????????????????2        ?????????3
???2.id选择器个数不相等,id越多,优先级越高
???3.id选择器个数相同,则看class,class多的优先级高
???4.class个数相等,就看tagName个数

前端(2)CSS

原文地址:https://www.cnblogs.com/ikamu/p/8447657.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved