css学习_写法规范、选择器

1、css(层叠样式表)样式主要目的(让页面更好看些)

css尽量不要写内联样式,保证结构和样式分离原则;

html专门负责结构,css专门负责样式。

2、css写法规范

选择器  { 属性 :值 ; }

内联样式  写在标签里   style=“”属性:值“”

内部样式  写在head标签里的style标签里

外部样式   通过链接导入样式表  link

3、font-size(字号大小)

4、浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px

一般不想写中文是可以用uncode字体,并且尽量只写宋体和微软雅黑

5、*  指的是选择所有标签

* {

color:red;

}

6、font-weight : nomal(相当于400)、bold(700)、bolder、lighter、100-900(100的整数倍)

7、字体综合设定(有顺序不能乱写)

8、用谷歌调试工具检查css样式

按f12   或者 审查元素

找到html的css样式定位问题

9、选择器(从n多元素中选择某个元素或某类元素)

标签(元素)选择器  :标签名。

id选择器: #id     标签( 元素)的id  。

通配符选择器:* (选择所有的元素)------一般很少使用,使用时也是用来清楚标签默认样式的。

类选择器:   .类名  (点 类名--》申明类样式)     class = ‘类名‘ (调用类名)

【类名命名规则:比较长的名称最好用-(横杆) eg:  c-orange 尽量用下划线 ,当然也有和js搭配时使用的类名取的是下划线。

尽量不用下划线一是因为下划线可能有兼容性问题 二是因为js中变量可以可用下划线  所以css中尽量不要下划线

不要用纯数字和纯中文命名,一般命名原则是见名知意】。

多类名 class=“font20 pink fontWeight”

10、id选择器和类选择器最大的区别:

类选择器可以重复多次使用,但id只能使用一次。(界面id的唯一性)

11、伪类选择器

a、链接伪类选择器(主要针对于a标签)

a:link{}

a:visited{}(一般很少用)

a:hover{}

a:active{}(鼠标放上去不松开,一般不用)

b、结构(位置)伪类选择器(css3,有一定的兼容性)

目的:选出第几个孩子

ul>li:first-child{}

ul>li:nth-child(n){}--选所有子元素li

ul>li:nth-child(odd){}   ---选下标(从1开始数)为奇数li

ul>li:nth-child(even){}  --选下标(从1开始数)为奇o u数li

ul>li:nth-child(2n){}    ---选下标为2n的li  (n从0开始)

ul>li:nth-child(2n+1){}    ---选下标为2n+1的li  (n从0开始)

c、目标伪类选择器

:target{color:red}

当前谁被选中(a的锚点)谁字体就是红色

原文地址:https://www.cnblogs.com/yangyutian/p/10441187.html

时间: 2024-10-12 11:58:03

css学习_写法规范、选择器的相关文章

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value

CSS学习(1)选择器

使用CSS 1,CSS是层叠样式表(Cascading Style Sheet),由选择器和声明块两部分构成.如下前部分h1是选择器,花括号包围的块是声明块. h1 { color: red; } 2,CSS使用主要分为外部样式表,嵌入样式表,和内联样式表. /*外部样式表*/ <link rel="stylesheet" href="base.css"> /*嵌入样式表*/ <style> h1 { color: red; } </s

css学习_文本有关的样式属性、sublime快捷生成标签

1.css中color定义文本的颜色 写法:(最常用的是16进制的) 2.行间距    line-height 3.水平对齐方式   text-align left right  center 4.首行缩进   text-indent 5.字与字间距  letter-spacing div{letter-spacing:2px} 6.单词间距 (针对英文,中文无效)  word-spacing 7.颜色半透明(css3) 4个参数不能省略 0--完全透明 1-完全不透明 8.文字阴影  text

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

原来你一直写错了?!实力分享一波 CSS 使用的书写规范顺序与偏门又实用的样式...

我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标: 第一.梳理知识架构 负责内容的HTML 负责外观的css(层叠样式表) 负责行为的js ps切图 第二.分解目标(起步阶段.提升阶段.成型阶段) 起步阶段: 基本知识的掌握 常用工具的掌

CSS学习之菜鸟入门

一.基础学习 1.何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言). CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀, 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以 她是每一个网页设计人员的必修课. 2.语法 2.1引用 链接式(href <head> <link rel="styl

css学习归纳总结

来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性选择器 如: p[title] { color:#f00; } 4.包含(后代)选择器 如:body ul li{} 5.子元素选择器 如:div > p{} 6.ID选择器 如:#myDiv{} 7.类选择器 如:.class1{} 8.伪元素选择器 如:E:first-line,

css基础语法一(选择器与css导入方式)

页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所有标签,必须借助选择器选中.选择器中,可以写多对CSS属性,用{}包裹: 每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔.         选择器{                    属性1:属性值1;                    属性2:属性值2;