css基础,css选择器
07.29自我总结
css基础
一.什么是CSS
CSS是级联样式表
CSS术语标记语言,没有逻辑
CSS作用 完成网页内容的样式与布局
二.CSS的三种引入方式
1. 内联式
- 书写位置:在 head标签内定义一个stype标签内
- CSS语法:css选择器{样式1;样式2}
- 优缺点:可读性强,有复用性,样式被html页面绑定了,不能提供给其它html页面使用
2. 外联式
- 书写位置:在外部css文件中,在html文件中通过link标签引入css文件
- CCS文件内CSS语法:css选择器{样式1;样式2}
- HTML文件中导入CSS文件语法:
<link rel="stylesheet" href="CSS文件路径">
- 优缺点: 可读性强,有复用性,适合团队开发(文件级别的复用性)
3. 行间式
- 书写位置:在标签的style属性中书写样式
- CSS语法:
<标签 stype='样式1;样式2;'>
- 优缺点:可读性差,没有复用性,书写直接
4. 三种方式的优先级别
- 内联与外联之间没有优先级区别,由于html属于解释性语言,书写在下方的会覆盖上方的样式
- 行间式的优先级要高于一切
三.CSS选择器
统配选择器
* {
样式1;
}
<!--表示所有样式-->
标签选择器
标签名 {
样式1;
}
<!--表示该标签内的样式-->
类选择器
.类名{
样式1;
}
<!--表示该类内的样式-->
ID选择器
#ID名称{
样式1;
}
<!--表示该ID下的样式-->
高级选择器(简单讲解)
标签名.类名{
样式1;
}
<!--同类名的情况下比较前面的标签的个数,个数越多优先级越高-->
关键字! important
写在样式后面用宫格隔开
优先级:! important > 行间式 > id > class > 标签 > 统配
从作用范围来判断的优先级:作用范围越精确,优先级越高
样式内容key如果有根据优先级进行取舍,没有则增加
css基础,css选择器的更多相关文章
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- HTML&CSS基础-CSS的语法
HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...
- CSS基础之选择器
一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- 《Java基础知识》Java注解"@"详解
Java注解含义: Java注解,顾名思义,注解,就是对某一事物进行添加注释说明,会存放一些信息,这些信息可能对以后某个时段来说是很有用处的.Java注解又叫java标注,java提供了一套机制,使得 ...
- 不加班的秘诀:如何通过AOE快速集成NCNN?
作为我司头发储量前三的程序员 始终仗着头发多奋斗在加班的第一线 时时灵魂拷问自己 年轻人,你凭什么不加班? 虽然我没有女朋友但是,我有代码呀 但我不明白的是,隔壁工位那个,到岗比我迟,下班比我早,天天 ...
- Leetcode979 : Distribute Coins in Binary Tree 二叉树均匀分配硬币问题
问题 给定一个二叉树的root节点,二叉树中每个节点有node.val个coins,一种有N coins. 现在要求移动节点中的coins 使得二叉树最终每个节点的coins value都为1.每次移 ...
- render加载vue文件 vue-loader配置
默认webpack无法打包.vue文件,需要安装相关Loader安装 npm install vue-loader vue-template-compiler -D webpack.config.js ...
- Java编译时常量和运行时常量
Java编译时常量和运行时常量 编译期常量指的就是程序在编译时就能确定这个常量的具体值. 非编译期常量就是程序在运行时才能确定常量的值,因此也称为运行时常量. 在Java中,编译期常量指的是用fina ...
- jQuery实现类似Chrome控制台可拖拽改变宽度的样式
最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...
- IT兄弟连 HTML5教程 CSS3属性特效 遮罩
CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.遮罩有三个属性可以设置,分别是mask-image.mask-position ...
- 几种设计良好结构以提高.NET应用性能的方法
写在前面 设计良好的系统,除了架构层面的优良设计外,剩下的大部分就在于如何设计良好的代码,.NET提供了很多的类型,这些类型非常灵活,也非常好用,比如List,Dictionary.HashSet.S ...
- 微信小程序-强制手机端更新
小程序的更新机制 开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本.微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新 ...
- 易优CMS:channelartlist 获取当前频道的下级栏目的内容列表
channelartlist 获取当前频道的下级栏目的内容列表 [基础用法] 名称:channelartlist 功能:获取当前频道的下级栏目的内容列表标签 语法: {eyou:channelar ...