css选择器 | 易学教程

css(二)

阅读更多关于 css(二)

文章目录 CSS 选择器优先级宽和高字体属性文字属性背景属性背景图片和应用案例边框画圆 display属性盒子模型浮动浮动的缺陷解决方法: 溢出圆形头像示例定位(position) 相对定位 relative 绝对定位 absolute 固定定位 fixed 是否脱离文档流哪些状态是脱离正常文档流的不脱离脱离 z-index模拟透明度 CSS 选择器优先级选择器相同，遵循就近原则；选择器不同行内–>id选择器–>类选择器–>标签选择器除此之外还可以通过添加 !importrant方式来强制让样式生效,但并不推荐使用,因为使用过多会导致样式文件混乱不堪,不宜维护. 语法举例:.c1 { color: blue !important;} 宽和高宽和高.只能给块儿级标签设置;行内标签是无法设置宽高的. width:宽 heigth:高字体属性调节文本颜色两种方式 color : yellow ; #颜色 color : #ffffff;#颜色 color : rgb ( 255 , 103 , 0 ) ; #颜色深浅 color : rgba ( 255 , 103 , 0 , 0.4 ) ; #颜色深浅 font - family : 'Consolas' , 'Deja Vu Sans Mono' , 'Bitstream Vera

js

阅读更多关于 js

document.getElementById(“id值”)：通过id获取元素 document.getElementByName(name)：通过name名称获取元素 document.getElementsByTagName(“标签名”):通过标签名获取元素，可以获取多个 document.getElementByClassName(“类名”)：通过类名获取元素 document.querySelectorAll(css选择器)：通过css选择器的方法获取元素例 body .css 获取和改变元素的内容获取： innerHtml：获取元素的内容，包括标签 innerText：获取元素的内容，过滤标签改变： innerHtml：设置元素的内容，包括标签 innerText：设置元素的内容，过滤标签 classList:类列表 add() 添加类 remove() 删除类 toggle() 切换类 el.style= 设置元素的行内css样式例el.style.fontSize=14px document.body body标签 event 事件 onclick 单击 onsubmit 提交事件 onblur 失去焦点 onfocus 获取焦点 onchange 发生改变来源： CSDN 作者： cyang233 链接： https://blog.csdn.net

HTML选择器

阅读更多关于 HTML选择器

CSS：Cascading Style Sheet 层叠样式表元素选择器 a{} 伪元素选择器 ::before{} 类选择器 .link{} 属性选择器 [type=radio]{} 伪类选择器 :hover{} ID选择器 #id{} 组合选择器 [type=checkbox] + label{} 否定选择器 :not(.link){} 通用选择器 *{} 选择器权重 ID选择器 +100 类伪类属性 +10 元素伪元素 +1 其它选择器 +0 ！important 优先级最高 .test { color : red!important ; } 元素属性优先级高相同权重，后写的生效来源： CSDN 作者：超人不会飞/ 链接： https://blog.csdn.net/ChristWTF/article/details/103738434

CSS层叠样式表01

阅读更多关于 CSS层叠样式表01

CSS(Cascading Style Sheets)层叠样式表用于修饰HTML标签的样式 CSS注释一般来说，CSS是一个独立的文件，由于它的内容是修饰HTML标签的样式，为了方便后期的维护和修改，所以我们人为使用注释说明当前样式的是用于修饰什么内容的单行注释：/*注释文本*/ 多行注释：就是在单行注释中换行即可 /* 注释1 注释2 */ 养成习惯 /*这是首页的css样式文件（说明css文件的作用）*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/ CSS语法结构选择器名 { 属性名:属性值; 属性值1:属性值1; …… 属性值n:属性值n } CSS三种引入方式 1.外部CSS文件(标准使用方式)  <link rel="stylesheet" href="myfirstcss.css"> 2.在head标签使用style标签编写CSS代码 <head> <meta charset="UTF-8"> <title>CSS样式</title>  <style> P { color: indianred; } </style> </head> 3.标签内部通过style属性直接书写对应的样式(不推荐使用) <div> <p style=

JQUERY 常用方法汇总

阅读更多关于 JQUERY 常用方法汇总

Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容（元素，文本等） $("元素名称").html("<b>new stuff</b>"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value);

初始css一

阅读更多关于初始css一

初始CSS 一、form表单补充 form表单关键性的属性补充 form表单关键性的属性 action 控制的是数据的提交路径 1、不写默认是朝着当前页面所在的地址提交 2、全路径 3、后缀（/index/） method 控制的是提交方式 form表单默认是get请求 method='get' 你也可以指定成post请求 method='post' enctype 控制的是数据提交的编码格式默认情况下form表单是不能够直接发送文件的如果你要发送文件必须将该参数由默认的urlencoded改为formdata 注意事项： 1、获取用户输入的标签都是用value属性来存放用户的输入获取用户输入的标签都应该有name属性就类似于字典的key value属性就类似于字典中的value 2、如何给input设置默认可以直接给input标签加value属性 3、input框如何设置提示信息 username:<input type='text' value='jason' placeholder='用户名'> 二、验证form提交数据结合Flask演示验证后端框架 Django Flask Tornado Flask框架 pip install Flask get请求能够携带参数但是参数的携带方式是直接跟在url后面的 url?xxx=ooo&yyy=bbb&lll

前端内容整理(二)

阅读更多关于前端内容整理(二)

本章内容 CSS 一、css注释 css一般是独立的文件。注释写法：/*注释内容*/ 注释格式： /*这是首页的css样式文件*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/ 二、css语法结构选择器{属性名1：属性值1；属性名2：属性值2； } 三、css的引入方式 1.外部css文件 <link rel="stylesheet" herf="mycss.css"> 2.head内style标签内部直接书写css代码 3.标签内部通过style属性直接书写四、选择器的分类 1.基本选择器标签选择器:选择所有p标签 p { color:red; } ----------------------------------------- id选择器：选择所有id=‘id_user’的标签 #id_user{ color:red; } ----------------------------------------- (class)类选择器：选择所有class=‘cls’的标签 .cls{ color:red } ----------------------------------------- 通配选择器：选择所有的标签 *{ color:red } 2.组合选择器后代选择器:用空格表示，选择div内的所有span标签 div span{ color

CSS介绍

阅读更多关于 CSS介绍

什么是CSS CSS就是层叠样式表，定义如何显示HTML元素，当浏览器读到一个样式表，就会按照这个样式来渲染文档 CSS语法选择器 {属性名：值；属性名：值；...} CSS注释注释样式： CSS注释与HTML不一样 HTML： CSS：/*注释内容*/ 注释使用： CSS应该是一个独立的文件 /*这是XXX首页的CSS样式文件*/ /*页面通用样式*/ /*左侧菜单栏样式*/ CSS引入方式 1.通过link属性，导入外部css文件（推荐使用方式） 2.head内style标签内部直接书写css代码 3.标签内部通过style属性直接书写对应样式（不推荐）选择器 1.基本选择器元素选择器 /*标签选择器元素选择器*/ div { /*将页面上所有的div标签内部的文本变成红色*/ color: red; } 类选择器 /*类选择器点号*/ .c1 { /*让所有具有c1类属性值的标签内部文本变成蓝色*/ color:blue; } id选择器 /*id选择器 #号*/ #d1 { /*将id为d1的标签内部文本内容改成绿色*/ color: green; } 通用选择器 /*通用选择器 *号*/ * { /*页面上所有的标签统一修改样式*/ color: aqua; } 2.组合选择器后代选择器 /* 后代选择器 */ div span { /

css选择器，伪类和伪元素的区别

阅读更多关于 css选择器，伪类和伪元素的区别

1、类选择器：class名 =>p.info {} //选择class为info的所有p元素 2、id选择器： id名 => #info {} //选择id为info的元素不能为多个元素同时设置相同的id 3、标签选择器：标签名 => div {} //选择所有的div 4、并列选择器：#info，.info, p {} //同时选择多个选择器 5、后代选择器：父选择器子/孙选择器或父选择器>子选择器　　　　　　　 div p {} //div内的所有p 　　　　　　　　div>p{} //div内仅邻的子元素p不包含p元素内部的p元素 6、兄弟选择器： div+p //选择每个紧跟在div元素后面的第一个p元素　　　　　　　　p~ul //选择前面有p元素的所有ul元素　　　　 7、属性选择器：　　　　　　　　[title] //选择所有有title属性的元素　　　　　　　　[title=info] //选择所有title属性值为info的元素　　　　　　　　　　[title~=info] //选择所有title属性值包含info的元素　　　　　　　　　[title|=info] //选择所有title属性值以info开头的元素　　　　　　　　[title^=info] //选择所有title属性值以info开头的元素　　　　　　　　[title$

css3---伪类与伪元素

阅读更多关于 css3---伪类与伪元素

1、伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪元素表示DOM外部的某种文档结构。伪类一般反应无法在css中轻松的检测到某个元素属性或者状态。　　　 CSS 伪类用于向某些选择器添加特殊的效果。　　　CSS 伪元素用于将特殊的效果添加到某些选择器。　　第一两者都与选择器相关，第二就是添加一些“特殊”的效果伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。标准精确地使用 "create" 一词来解释伪元素，而使用 "classify" 一词来解释伪类的原因。　　伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。　　伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中 2、对于IE6~8，仅支持单冒号表示法，现代浏览器两种方法都支持。另外一个区别是，双冒号与单冒号在css3中主要用来区别伪类与伪元素 3、伪元素包括：　　　css中的　　　：first-line　　:first-letter　　:before　　:after 　　　css3调整后的　　:：first-line　　::first-letter　　::before　　::after　　:

订阅 css选择器