Css,Cascading Style Sheets,层叠样式表。用于控制HTML页面样式。他的基本格式由两部分组成:选择器 声明块一、使用css的注释用 /* 注释内容 */1.导入外部样式表<link rel=&rdquo;stylesheet&rdqu ...
Css,Cascading Style Sheets,层叠样式表。用于控制HTML页面样式。他的基本格式由两部分组成:
选择器 声明块
一、使用
css的注释用 /* 注释内容 */
1.导入外部样式表
<link rel=”stylesheet”type=”text/css”href=”myCss.css”media=”all”/>
rel:表示关系,这里的关系是“stylesheet”;如果将rel定义为“alternate stylesheet”,他就为候选样式表,利用title属性生成候选样式列表;
type:描述link加载的数据类型;
href:样式表的位子;
media:这个样式要运用的媒体,all表示所有。
2.内嵌在页面的css
<style type=”text/css”> /*样式表内容*/ </style> 。可以使用media属性。
3.内嵌样式表中导入外部样式表
<style type=”text/css”>
@import url(mycss.css) media;
/* 样式表内容 */
</style>
media作用和前面的link一样,可有可无。
4.内联的样式
直接使用元素的style属性,指定p标签内的颜色为红色
<p style = “color:red”>xxxx</p>
二、选择器
1 分组
h1 , h2 , p { color : red; } 逗号表示分组,这句表示h1,h2,p标签的字体颜色为红色。如果不要逗号,意义完全不一样。
* { color : grey ; font-size: 80px ;} * 是通配选择器,表示所有的标签元素 字体为灰色,大小为80像素。
2 类选择器 要区分大小写
.warning { font-weight : bold ; } 表示class值为“warning”的标签,字体全部加粗。前面有英文的句号。类选择起可以连起用 如 p.warning.help ,他匹配的是class属性包含warning 和 help的p元素。中间没有空格。
3 id选择器 要区分大小写
#warning { font-weight : bold ; } 表示Id值为“warning”的标签,字体全部加粗。前面有井号。
p#warning 表示id为warning的p元素
用id选择器还是类选择器?
类名可以重复用,而html中标签的id是唯一的。这意味着id选择器在一个html文档中,最多只会使用一次。
4 属性选择器 [ ]
4.1根据属性选择
h1[class] { color: silver } 表示 带有class 标签的h1元素都被选择,设置字体颜色为灰色。
* [id] 表示选择所有的带有id属性的元素。其他属性选择同理。
4.2根据属性值选择
a[ href =”http://www.baidu.com”] 表示选择所有超链接等于百度的a标签。
p[ calss=”warning”] 表示选择所有class等于warning的p标签。
4.3根据部分属性值选择
p[ class~=”warning”]表示包含warning这个词的class属性,注意不是包含这个字符串,而是包含词,使用空格分开的词!他根据属性中,一个用空格分隔的词来完成选择。他等价与 p.class
p[ class ^=”warning”] 表示calss属性以字符串warning开头的p标签。
p[ class $=”warning”] 表示calss属性以字符串warning结尾的p标签。
p[ class *=”warning”] 表示calss属性包含字符串warning的p标签。
4.4后代选择器
#d1 h1{ color : red }表示id为d1元素的所有后代h1字体颜色为red。
#d1 > h1{ color : red }表示id为d1元素的所有直接子元素h1字体颜色为red。
#d2 + div{ color : red }表示id为d2元素的紧接着的一个兄弟节点div的字体为红色。
4.5伪类选择器
4.5.1链接伪类
a:link 表示未访问的超链接
a:visited 表示已访问的超链接
4.5.2动态伪类
input : focus 表示当前有输入焦点的input元素。
p:hover 表示当前鼠标停留的元素。
button : active 表示被用户输入激活的元素。
注:在a标签上设置伪类样式时,推荐是“LOVE-HA” ;link ,visited , hover , active
4.5.3静态伪类
h1:first-child 选择 作用第一个子元素的 h1 。eg:
<body>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:随便写写,当作了解
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。