css样式 | 易学教程

CSS3基础：样式和选择器

阅读更多关于 CSS3基础：样式和选择器

一、CSS代码语法 css 样式由选择符和声明组成而声明又由属性和值组成如下图所示：上面的例子中使网页中所有的p标签的文字将变成蓝色而其他的元素不会受到影响只针对p标签选择符：又称选择器指明网页中要应用样式规则的元素声明：在英文大括号“ ｛｝ ”中的的就是声明属性和值之间用英文冒号“：”分隔当有多条声明时中间可以英文分号“;”分隔如下例： p { font-size : 12px ; color : red ; } 注： 1、最后一条声明可以没有分号但是为了以后修改方便一般也加上分号 2、为了使样式更加容易阅读可以将每条代码写在一个新行内如下例： p { font-size : 12px ; color : red ; } 二、CSS注释代码就像在Html的注释一样在CSS中也有注释语句用 /*注释语句*/ 来标明 (Html中使用的是：  ) 三、CSS样式 CSS代码可以用三种样式实现分别是：内联式嵌入式和外部式 1、内联式内联式css样式表就是把css代码直接写在现有的HTML标签中如下例： <p style= "color:red" >这里的文字是红色的</p> 注：要写在元素的开始标签里下面这种写法是错误的： <p>这里文字是红色。</p style= "color:red" >

2020/03/02~03 CSS选择器总结

阅读更多关于 2020/03/02~03 CSS选择器总结

在总结之前，先把三种整体的选择器写出来标签选择器标签名{ } 如： div { } 类选择器 .类名{ } 如： .username { } id选择器 id{ } 如： name { } < hr > < ! --分割线-- > 普遍选择器选中所有：星号 * 选中直接子代：大于号 > 选中所有后代：空格 ~~ ~~ 嵌套选择 .类名空格 .类名{ } 如：选中类名为one下所有类名为name的后代 .one .name { } 组合选择 .类名，.类名{ } 如：同时选中类名为one和two的标签 .one,.two { } 选中同标签中类名为one的标签 div.one { } 层次选择器（注：在末尾有可复制试验代码，包含所有情况，代码加截图) 选择某标签之后所有兄弟：波浪号~ 选择某标签后下一个兄弟：加号+ 属性选择器（注：在末尾无可复制试验代码，有机会再补上，可以用上面的尝试) 选择拥有某属性的标签 [属性名]{ } 选定有某属性的标签标签[属性名]{ } 选定有某属性且某属性为某值的标签标签[属性名=值]{ } 选定有某属性且某属性值的首位以X开头的标签标签[属性名^=X]{ } 选定有某属性且某属性值的末尾以X结尾的标签标签[属性名$=X]{ } 选定有某属性且某属性值中模糊匹配包含X的标签标签[属性名*=X]{ }

解决ecshop清除缓存css样式没反应问题

阅读更多关于解决ecshop清除缓存css样式没反应问题

部分浏览器例如谷歌或360等双核浏览器会对商城的css样式进行缓存，导致修改了css样式文件也没有更新。 ecshop模板提供解决方法，修改后效果如下：解决方法：修改includes/init.php 找到 if (!empty($_CFG['stylename'])) { $smarty->assign('ecs_css_path', 'themes/' . $_CFG['template'] . '/style_' . $_CFG['stylename'] . '.css'); } else { $smarty->assign('ecs_css_path', 'themes/' . $_CFG['template'] . '/style.css'); } 修改为： if (!empty($_CFG['stylename'])) { $smarty->assign('ecs_css_path', 'themes/' . $_CFG['template'] . '/style_' . $_CFG['stylename'] . '.css?'.time()); } else { $smarty->assign('ecs_css_path', 'themes/' . $_CFG['template'] . '/style.css?'.time()); } 修改后，style

webpack4中引入bootstrap 样式

阅读更多关于 webpack4中引入bootstrap 样式

有时候我们要引入bootstrap ui样式并不引入 bootstrap.js文件很多时候只是引入css文件这个时候就来简单说一下 1.在入口的文件引入bootstrap import "bootstrap" 如果上面这种方式引入的话是会报错的错它会显示找不到路径页面上的样式并没有显示他找到是文件下的js文件正确引入方式是 import "bootstrap/dist/css/bootstrap.css" 当然当我们引入css文件的时候别忘了配置 css-laoder 首先是安装 cnpm i css-loader style-loader -D { test : /\.css$/i , use : [ 'style-loader' , 'css-loader' ] // 注意俩者先后顺序别写错了 } 在页面上引入样式 div class = "container" > < div class = "alert alert-primary" > Hello World < / div > < button class = "btn btn-primary" > 确认 < / button > < / div > 启动webpack 打包就能看到显示效果了当然每次书写那么长的引入路径是不是不方便这个时候我们可以采用用起别名的方式在webpack

CSS

阅读更多关于 CSS

文章目录语法选择器插入样式表 css样式背景文本链接其它(列表，表格，轮廓) 框模型 CSS 定位媒介 css发展，语法 CSS 规则由两个主要的部分构成：选择器selector ，以及一条或多条声明declaration 。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如： h1 {color:red; font-size:14px;} 值的不同写法和单位 p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 如果值为若干单词，则要给值加引号 p {font-family: “sans serif”;} CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。选择器的分组 h1,h2,h3,h4,h5,h6 { color: green; } 根据 CSS，子元素从父元素继承属性。如果对body设置 Verdana 字体，则不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体选择器派生选择器 (标签、id、class、属性组合)

css语法特点和引入页面三种方式与其优先级

阅读更多关于 css语法特点和引入页面三种方式与其优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如div{font-size:12px;color:red;font-weight:bold;}文字大小、颜色、字体加粗等。css优势是什么？编写一条css语句控制3个span里面的文本语句颜色，使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 ☆css样式由选择符和声明组成，而声明又由属性和值组成，/*选择符{属性:值}选择符=>选择器 {属性:值}=>声明*/ 选择符：又称选择器，指明网页中要应用样式规则的元素；声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔; 注意： 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内。 CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单了解css特点,语法和注释</title> 6 <style

CSS Sprites

阅读更多关于 CSS Sprites

CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。 2.优点（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；（2）CSS Sprites能减少图片的字节；（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。 3.缺点（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css

CSS 基础知识

阅读更多关于 CSS 基础知识

CSS 实例(CSS声明总是以分号(;)结束，声明组以大括号({})括起来:) CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 p { color:red; text-align:center; } 关于text-align left 左对齐内容。 right 右对齐内容。 center 居中对齐内容。 justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 "/*" 开始, 以 "*/" 结束 id 选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } 注意:ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器

CSS选择器的优先级

阅读更多关于 CSS选择器的优先级

1.首先介绍一下CSS内联　　内联css也叫做行级css或行内css，它是直接在标签内使用 1 <body> 2 <span style="color: red;">我是span块</span> 3 </body> 2.各种选择器标签选择器：点击这里了解标签选择器 ID选择器：点击这里了解ID选择器类选择器：点击这里了解类选择器属性选择器：点击这里了解属性选择器伪类：点击这里了解伪类标签选择器：点击这里了解标签选择器伪元素：点击这里了解伪元素 3.进入主题，了解选择器优先级计算公式每位写过各种选择器的学习者来说，都总结过一个大众的规律：内联>ID选择器>类选择器>标签选择器其实关于优先级有一个计算公式，在《CSS REFACTORING》一书中提过 A specificity is determined by plugging numbers into (a, b, c, d): If the styles are applied via the style attribute, a=1; otherwise, a=0. b is equal to the number of ID selectors present. c is equal to the number of class selectors, attribute

530，css outline属性

阅读更多关于 530，css outline属性

outline：none，是什么意思呢 outline-style属性用于设置整个轮廓的样式。样式不能是none，否则轮廓不会出现。 outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用。outline属性设置元素周围的轮廓线。（请始终在outline-color属性之前声明outline-style属性，元素只有获得轮廓后才可以改变其轮廓的颜色；轮廓线不会占据空间，也不一定是矩形；默认值：none；）设置轮廓的样式 p{ outline-style：dotted； } 只有规定了!DOCTYPE时，Internet explorer才支持outline-style属性（none 默认，定义无轮廓 dotted：定义点状的轮廓 dashed：定义虚线轮廓 solid ：定义实现轮廓 double：定义双线轮廓。双线的宽度等同于 outline-width 的值）来源： https://www.cnblogs.com/1998Archer/p/12394507.html

订阅 css样式