CSS总结01

03：CSS（01）

内容概要分组与嵌套伪类选择器伪元素选择器选择器优先级 css属性相关(操作标签样式) 浮动定位模态框透明度内容详细分组与嵌套 div,p,span { /*逗号表示并列关系*/ color: yellow; } #d1,.c1,span { color: orange; } 伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

CSS基础(01)

1. Css基础 1.1 CSS(层叠样式表 Multiple Styles) CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行. CSS 文件也可以说是一个文本文件,它包含了一些 CSS 标记,CSS 文件必须使用 css 为文件名后缀. 1.2 CSS权值.CSS优先级 CSS的权值设计到浏览器解析CSS 优先级的问题,当选择器权值越大则优先级越大,最直接的体现是设定后的CSS后却没有效果,…

css笔记01：CSS例子

body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: 12px sans-serif; } (1)margin和padding的区别用图表示为: (2)CSS里定义body{ }和定义*{ }的区别 * { ; ; ; } body { background: #CCC; padding-top: 20px; text-align: center;…

重温css系列01

2016-01-07——解决背景层透明度的问题需要ie9+ 问题:如果我对div设置opacity: 0.8;这个透明属性后希望内容不发生改变怎么弄? A:做两层,或者rgba 解决后的效果图: 独自坐着地铁突然一股莫名的孤独感涌上心头,原来这么久都是一个人承载着生活中的苦辣与酸甜! 往往都在拼命的往终点狂奔,忽略了太多身边的人和事了,需要我们静下来,重新整理一下自己的思绪,勿忘初衷!——2015-10-11(帮朋友搬家) 好,我们进入今天的主题重新整理一下css中一些容易忽略的问题 1…

css基础--常用css属性01

1 背景相关背景颜色 background-color = 颜色名称/rgb值/十六进制值背景图片 background-image = url('') 背景图片平铺方式 background-repeat = repeat-x(仅水平平铺) repeat-y(仅垂直平铺) no-repeat(不平铺) 设置背景图片位置 background-position = 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px…

前端之css样式01

选择器,css文本属性 CSS语法: 选择器 {属性1: 值1; 属性2: 值2} CSS放置的位置: 1. 直接写在标签里面,通过style属性来设置CSS样式 2. 在head标签里面通过style来写样式 3. 放到一个文件里面去 CSS选择器: 1. 标签选择器 (给哪个标签写样式就写那个标签名) CSS属性: color font-size width height background-color border(简写) 宽度类型颜色 CSS 能够对网页中元素位置的排版进行像素级精…

1 CSS 的作用是? 2 如何引入 CSS 样式? 3 CSS 选择器的基本类型和复合选择器分别是? 4 字体.背景.列表和链接和鼠标的属性有哪些? 5 如何理解盒子模型? 6 浮动的方式有哪些,如何清除?…

python+selenium元素定位之CSS学习01

参考文档:https://www.w3school.com.cn/cssref/css_selectors.asp 选择器例子例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有 <div…

css笔记01

CSS样式(Cascading Style Sheets) 表格布局缺陷: 嵌套太多,一旦顺序错乱页面达不到预期效果表格布局页面不灵活,动一块整个布局全都要变语法: 在style标签中去编写css内容通常位于head标签中 <!-style> .选择器{ 属性名称:属性值: -- } </style> 选择器位于style标签内 div{ color:red;//则内部所有div全部改变 } 元素选择器元素名称{ 属性名称:属性值: -- } div{ colo…

CSS基础01

1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. 4.z-index 属…

CSS经验分享：如何书写可维护的CSS代码01

转自:http://www.cnblogs.com/hxling/archive/2013/02/21/2920520.html 一.在样式表开头添加一个注释块,用以描述这个样式表的创建日期.创建者.标记等备注信息. Example Source Code:/* ---------------------------------Site: Site name Author: 52CSS.comUpdated: Date and time Updated by: Name ------------…

30个你必须记住的CSS选择符

所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1.* * { margin: 0; padding: 0; } 对于初学者,在学习更多高级选择器之前,最先了解的选择器. 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必要…

使用HTML 和CSS 开发商业站点

第一章HTML 基础1.html 的基本结构?解析:2.HTML 全称Hyper Text Markup Language(超文本标记语言)扩展XML:Extendsible Markup Language(可扩展性标记语言)3.高级记事本Ue(UltraEdit)nodepad++Editplus快捷键用熟一个即可.4.编写html 文档的注意点01.所有标签字母均小写.02.有开始就要有闭合标签03.每个层次的标签有一定程度的缩进.解析:如果发现body 内书写了内容,用浏览器打开后发现没有…

[bootstrap] 基本css样式和组件

一.基本css样式 01.全局设置全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性. 可通过添加 .lead 让段落突出显示 variables.less文件中定义的两个LESS变量决定了排版尺寸: @baseFontSize 和 @baseLineHeight.第一个变量定义了全局font-size基准,…

css笔记19：浮动的案例

案例一: 1. 首先是01.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt…

Angular21 动态绑定CSS样式

1 需求在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指令在angular中指令是作用在特定的DOM元素上的,目的是用来扩展元素的功能,为元素添加新的功能:angular框架本身提供的指令就叫做内置指令,例如:NgClass.NgStyle.NgIf.NgFor.NgSwitch等,利用NgClass.NgStyle和Class指令来动态绑定CSS样式…

整理CSS选择符

1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必要的负担. * 也能作为子选择符使用. #container *{ border: 1px solid black; } 这将匹配 #container div 的每一个后代元素.再次强调,尽量不要使用这种技术. 兼容性:IE6+.Firefox.Chrome.Safari.Opera 2.ID选择…

css美化页面

css美化页面如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900 font-size:字体的大小 10px 2em rem pc pt font-family:字体的类型,比如我们的楷体,隶书,宋体..... font:风格粗细大小类型在一起设置属性的时候,四种属性顺序不能颠倒! 2.文本样式…

HTML5和CSS基础

1 HTML 基本语法 html标签单标签 <img /> .<img> 双标签 <html> </html> 属性属于标签 <img src="图片的地址"><table width="100" height="200"></table> 语法规范标签嵌套用缩进标签名不区分大小写建议小写属性名不区分大小写建议小写注释 <!-- 多行…

css基础--常用css属性02

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码规律找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码当熟悉使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块提示:你需要使用命令行的 cd 切…

Python 45 css三种引入方式以及优先级

一:css三种引入方式三种方式为:行间式 | 内联式 | 外联式行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用;隔开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种引入方式</title&g…

前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

一.Vue的生命周期生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着,你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义. 生命周期的钩子函数,就是vue实…

css三种引入方式以及其优先级的说法

css 三种引入方式方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用分号 : 隔开方式二:内联式在style标签内(style标签一般为head的子标签属性值满足的是css语法属性值用key:value形式赋值,value具有单位属性值之间用分号 : 隔开方式三:外联式 1.在外部的css文件中 2.属性值满足css语法 3.属性值用key:val…

CSS(上)

目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式行内样式内部样式外部样式 CSS的两大特性 CSS选择器基本选择器组合选择器更多选择器选择器的优先级 CSS(上) 什么是CSS? CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. CSS的优点使数据和显示分开降低网络流量使整个网站视觉效果一致使开发效率提高了(耦…

前端之css引入方式/长度及颜色单位/常用样式

1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>三种引入方式</title>  内联式: <!-- <style type="text/css"> div { width: 200px; height: 200px…

css002 创建样式和样式表

创建样式和样式表一个样式表包含多个样式样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style> (该标签是html的标签,不是css的) h1{color: red} </style> </head> 2.外部样式表 Html5 <link rel=”stylesheet” href=”style.css”> Html4.01 <link rel=”stylesh…

大前端时代已经到来！传智播客2015之WEB前端视频教程（全套教程共15G）

大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教程-----------├文件夹1:[01 html教程视频]│ ├文件夹1:[324带你一周hold住html+css 第01讲 html标记语法基础]│ │ ├(1)html标记语法基础 (1)│ │ ├(2)html标记语法基础 (2)│ │ ├(3)html标记语法基础 (3)…

CSS3秘笈第三版涵盖HTML5学习笔记1~5章

第一部分----CSS基础知识第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中的章节一样 <aside>标签包含与其周边的内容相关的内容,如纸质杂志上的侧边栏一样 <footer>标签包含通常放在网页底部的一些信息,如版权声明.法律信息.一些网站的导航链接,等等 <nav>标签用来包含重要的导航链接 <figure>标签用于说明图让IE…

css3划过图片闪光

css代码 01 .img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} 02 .img:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left:-150px; overflow: hidden; 03 background: -moz-linear-gradient…

【CSS总结01】的更多相关文章