第一种,行内样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的行内样式</title></head><body> <div style="color: blue; font-size: 28px; font-weight:bold;">orange">我是容器标签</div> <p style="color: red; font-size: 60px; border: 5px solid purple">我是段落标签</p></body></html>第二种,页内样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来:所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑CSS的一个主要特征就是...
1<!DOCTYPE html> 2<html> 3 4<head> 5<meta charset="UTF-8"> 6<title>购物车效果</title> 7 8<style> 9 body {10 background: black;11}1213 nav {14 width: 120px;15 height: 40px;16 background: #ccc;17 margin-left: 300px;18 position: relative;19}2021 nav a {22 display: ...
伸缩布局(一);1.创建一个flexbox容器。.flexconfainer{display:-webkit-flex;display:flex;
}2.flex项目显示;flex项目是flex容器的子元素,他们沿着主要轴和横轴定位,默认的是沿着水平轴排列一行,可以通过flex-direction来改变主轴方向修改为column,其默认值是row。3.项目列显示;.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:colmn;flex-direction:column;
}4.还有两个属性值:如果是垂直方向的有...
<form><div><input id="item1" type="radio" name="item" value="选项一" checked><label for="item1"></label><span>选项一</span></div><div><input id="item2" type="radio" name="item" value="选项二"><label for="item2"></label><span>选项二</span></div>
</form>
div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;w...
1.子元素宽度百分比指的是基于父级元素的width,不包含padding,border。.box {width: 400px;height: 400px;padding: 20px;background-color: red;
}.item {width: 100%;height: 200px;background-color: blue;
}<div class="box"><div class="item">item元素的width为400px</div>
</div>如果父级元素box-sizing: border-box,子级元素大小的百分比基于父级真正的大小,即除去padding,border之后的大小.box {width: 400px;height: ...
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/一、关于CSS样式分离zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞。无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用。CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式:.example{color:red;}所有想让文字显示红色的标签都可以应...
1 样式表 内联样式表 内嵌样式表 外部样式表2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开头 复合选择器 1 以,隔开的 表示并列 2 用空格隔开的 表示后代 .class p /*找到使用的.class的标签,在该标签中的p标签使用该样式*/ 3 用.隔开的 表示筛选 p sp /*在标签p中的“class="‘sp” 使用该样式*/ 格式与布局 1 position...
css:层叠样式表 美化页面 修改标签的样式写法分类: 1.内联: <!--使用<link />标签将css文件引入到html文件中--><!--<link href="路径" rel="stylesheet"/>--><!--<link/>标签只可以放在<head></head>之中,另外在html中内嵌css样式也只可以写在head标签之中--><!--内嵌书写方式--><style type="text/css"> /*标签名style*/ button{ /*选择器*/ color: red; /*样式属性:样式值*/ }</style...
层叠样式表:CSS Cascading Style Sheet。V2.1 (3.0版本有些旧系统不支持)控制页面样式外观。一、样式表分三类: 1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> (solid意思是实线)2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。<head>...<style type="text/css">input{ border:0px;...
JavaScript访问修改样式表,可以方便的动态修改页面:一、访问元素中style属性的CSS样式这个可以直接使用style对象方便的访问,例如:<div id = "mdiv" >....</div> 访问CSS的方法是: <script type="text/javascript">//获得元素var oDiv = document.getElementyId("mdiv");//访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值alert(oDiv.style.backgroundColor);</script> 二、访问外部定义的CSS样式(类定...
在CSS中关于position定位的内容是: position: relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定...
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式具体所指如图例 上面是滚动条的主要几个设置属性...
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式)清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致。common.css(公共组件样式)一般一个网站所有页面头部、底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求,要保证全站所有页面头部一次替换生效,只要把头文件,已经对应的样式一发,马上生效,很...
一 CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: ...