【摘要】 css(1)考必过小编为大家整理了关于css(1)的信息，希望可以帮助到大家！
css(1)
标签：style 边框 签名 table rip bsp 直接 ant number
前端三要素：
html：木偶
css：化妆
javascript：动态展示（跳舞）
css:
1.什么是css？
cascading style sheets
层叠样式表
2.css的语法
1.属性名和属性值之间使用:隔开
多对属性之间使用;隔开
最后一对属性可以不加分号
id="one"
class=‘one‘
style=‘根据css语法设置‘
title=‘one‘
<p style="width:100px;height:100px;color:red;"></p>
<style>
选择器{
width:100px;
height:100px;
color:red
...
}
</style>
<p></p>
2.速记写法
简写形式
border:1px solid red;
border-width:1px;
border-top-width
border-left-width
border-right-width
border-bottom-width
border-style
border-top-style
border-bottom-style
。。。。
border-color
盒子=内容区+内边距+边框+外边距
padding margin
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
-->
padding:10px;//上下左右均为10px
padding:10px 20px;//上下10px 左右20px
padding:10px 20px 30px;//上10px 左右20px 下30px
padding:10px 20px 30px 40px;//上 右 下 左
margin：两个盒子之间的距离
3.注释
1.注释写法
/*注释内容*/
2.注释的作用
解释说明
更好的维护和管理
3.注释不能嵌套使用
<!--注释
<!--inner-->
内容-->
/*
/**/
*/
3.html中引入css的方式
1.行内样式
style属性
<p style=‘‘></p>
2.内联样式
style标签
<style>
p{
css语法
}
</style>
3.外部引入
创建.css为后缀名的文件
link标签：先加载css 写在style后面 head里面
@import url():不建议使用，先加载html 写在style里面
引入css的优先级问题：
行内样式>内联样式/外部引入
就近原则：哪一种设置方式更靠近元素，哪一种方式的优先级更高
4.选择器
标签选择器/元素选择器
根据标签名称选择一类元素
id选择器：
通过id属性选择一个元素
#value
<p id=‘one‘></p>
#one
类选择器：
class
.value
普遍选择器：
*：所有
后代选择器：
selector1>selector2:选择直接子元素
selector1 selector2:选择所有后代元素，包含孙代元素
兄弟选择器：
+:选择当前元素之后的一个兄弟元素
#one+p
~:选择当前元素之后的所有兄弟元素
#one~*
#one~p
属性选择器：
[class]:选择当前页面中具有class属性的元素
[class=‘one‘]:选择当前页面中具有class属性，并且属性值为one的元素
[class~=‘one‘]:选择当前页面中具有class属性，并且属性值之一为one的
[class^=‘o‘]:选择当前页面中具有class属性，并且属性值以o字符开头
[class$=‘o‘]:选择当前页面中具有class属性，并且属性值以o字符结尾
[class*=‘o‘]:选择当前页面中具有class属性，并且属性值中包含o字符
多选择器：
使用逗号隔开多个选择器
p
p
p{
width:100px;
height:100px
}
p{
width:100px;
height:100px;
}
-->
p,p{
width:100px;
height:100px;
}
#one,.two,p{
}
<p>
<ul class=‘one‘>
li*3
</ul>
<ul class=‘two‘>
li*3
</ul>
</p>
<p class=‘two‘></p>
p .one,p .two{
}
table tr td
组合选择器：
将多个选择器组合到一起使用
p.one{
}
<p class="one"></p>
<p class=‘two‘></p>
<p class=‘three‘></p>
<p class=‘one‘></p>
伪类选择器：
:伪类名称
:first-child
:last-child
:nth-child(number/odd/even)
和状态相关的：
:hover:当鼠标悬停在元素上时
:active：当鼠标按下时
:link：当鼠标未被点击时
:visited：当点击过之后的一个状态
设置顺序：
link-》visited--〉hover--》active
伪元素选择器：
<p>hello</p>
::伪元素的名称
::first-letter:第一个字符
::first-line：第一行
::seclection:文本被选中时
::before:在当前元素内容之前
content:text/url()
::after：在当前元素内容之后
----------------------------------------
选择器优先级：
!important:不计入特性值中，使用了该属性的样式优先级最高,不建议经常使用
优先级需要根据特性值来计算，特性值越大，优先级越高，特性值相同，越靠下的优先级越高
style属性中:1000
id选择器:100
类选择器/属性选择器/伪类选择器:10
元素选择器/伪元素选择器：1
p#one{//number=101
}
css(1)
标签：style 边框 签名 table rip bsp 直接 ant number
以上就是css(1)的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！