CSS笔记

来源：互联网发布：smartpss监控软件编辑：程序博客网时间：2024/06/05 20:13
由于有些零散的代码夹杂其中，所以用代码块编辑。
马士兵_CSS_学习笔记_尚学堂_个人整理 一、CSS定义CSS—Cascade Style Sheet层叠样式表(装饰标签的)1998/5/12，CSS level2成为W3C标准用来装饰HTML/XML的标记集合特点：样式表由样式规则组成，以告诉浏览器如何显示一个文档每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现二、CSS样式样式规则格式：选择符{属性:值}单一选择符的复合样式声明应该用分号分割：选择符{属性1:值1; 属性2:值2}<head><style type="text/css">H1{font-size:16pt;color:red}H2{font-size:10pt;color:green}</style></head>三、CSS的调用方式在Head中调用在Body中调用调用css文件CSS的优先级问题按照最靠近元素的定义来显示如果两个css文件冲突,以后面的为准四、CLASS & ID类选择符：Class在 CSS 中，类选择符以一个点号显示：.code一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式不同的选择符也可以同时定义一样的样式注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。ID选择符id 选择器以 "#" 来定义:#code注意：id 属性只能在每个 HTML 文档中出现一次。五、CSS组合/注释可以一次性定义多个选择符的样式H1,H2,H3{color:red;font-family:serif}(碰到H1或H2)P A{}   (P内的A标签)#head a (任何对象叫head,里面含有的a)注释：/*这是注释*/六、字体属性属性含义属性值font-family字体各种字体font-style字体样式Italic斜体、oblique黑体font-variant小体大写small-caps 小体大写font-weight字体粗细bold、bolder、lighter…font-size字体大小absolute、relative、%color字体颜色颜色值七、颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x | repeat-y | no-repeatBackground-attachment背景的滚动Scroll | fixBackground-position背景图案初始位置% | n em | top | left | right | bottom …八、文本属性属性含义属性值word-spacing单词间距n emletter-spacing字母间距n em text-decoration装饰样式underline| overline| line-through(中划线)| blink(闪烁)vertical-align垂直方向位置sub| super |top |text-top|middle| bottom| text-bottomtext-transform转为其他形式capitalize| uppercase| lowercasetext-align对齐left| right| center| justifytext-indent缩进n em| %line-height行高pixels、n em、%九、装饰超链接 伪类选择符(重点)对链接的修饰A:link 未访问时的状态A:visited 访问过后的状态A:active 鼠标点中不放时的状态A:hover 鼠标划过时的状态十、边距属性属性含义属性值margin-top上边距n em | %margin-right右n em | %margin-bottom下n em | %margin-left左n em | %十一、填充属性(段落内部填充一些)属性含义属性值padding-top上填充n em | %padding-right右n em | %padding-bottom下n em | %padding-left左n em | %十二、边框属性属性含义属性值Border-top-width上边框宽度n em | thin | medium | thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top |right|bottom|left上(右|底|左)所有属性Border-width | border-style | color十三、图文混排属性含义属性值Width宽度n em | %Height高度n emFloat文字环绕Left | rightclear去除文字环绕Left | right | both十四、列表属性属性含义属性值Display是否显示Block | inline | list-item | noneWhite-space空白部分Pre | nowrap | normal（是否合并)List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image项目前图片Img-urlList-style-position第二行位置Inside | outsideList-style全部属性Keyword | position | url十五、鼠标属性属性值含义属性值含义Auto自动N-resize上箭头Crosshair"+"Se-resize右下Default默认Sw-resize左下Hand手形S-resize下箭头Move移动W-resize左箭头E-resize右箭头Text"I"Ne-resize右上Wait沙漏Nw-resize左上help帮助十六、定位属性属性含义属性值Position位置Absolute|relative|staticLeft | top横向|纵向位置N em | %Width | height宽度|高度同上Clip剪切Shape | autoOverflow内容超出时Visible | hidden | scroll | autoZ-index立体效果Integervisibility可见性Inherit | visible | hidden十七、滤镜属性属性值含义属性值含义Alpha半透明Invert底片Blur模糊Light灯光投影Chroma指定颜色透明Mask透明膜Dropshadow投射阴影Shadow阴影Fliph水平翻转Wave波纹Flipv垂直翻转XrayX射线Glow光效Grayscale灰度
0 0