JavaWeb第二天--CSS
css
css简述
-
css是什么？有什么作用？
css(cascading style sheets)：层叠样式表。css通常称为css样式或层叠样式表。主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局等外观显示样式。
css可以使html页面更好看，css色系的搭配可以让用户更舒服，css+div布局更加灵活，更容易绘制出用户需要的结构。
css的代码规范
-
放置规范
在<style>标签内容体中书写css样式代码，<style>标签放置在标签中。 -
格式规范
选择器名称 {属性名:属性值; 属性名:属性值;......}选择器：即指定css样式作用在哪些html标签上。
-
代码规范
- 属性名和属性值之间是键值对关系。
- 属性名和属性值之间用”:“连接，最后”;“结尾。（例如：font-size:10px）
- 如果一个属性名有多个值，多个值之间用空格隔开。（例如：border:5px solid red;）
- css注释：/*注释内容*/
<!doctype html>
<html>
<head>
<title></title>
<style>
span{
font-size:120px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>
css选择器
基本选择器
-
元素选择器
html标签又名html元素。
元素选择器：即以html标签名作为选择器名称。
作用：选择css样式代码，作用于对应标签上。- 格式
标签名{ /*css样式代码*/ }
- 适用范围：适用于将相同样式作用在多个同名标签上。
- 格式
-
类选择器
每个html标签都有一个class属性，class属性值即为类名。
类选择器：即以html的类名（class属性值）作为选择器名称。
作用：选择css样式作为代码，作用于对应类名的html标签上。- 格式：
.类名{ /*css样式代码*/ } - 使用范围：适用于将样式一次作用在相同类名的标签上。
- 格式：
-
id选择器
每个html标签都有一个id属性，id的属性值必须在本页面是唯一的。
id选择器：即以html的id（id属性值）作为选择器名称。
作用：选择器css样式代码，作用于某个规定id值的html标签上。- 格式：
#id值{ /*css样式代码*/ }
*适用范围：适用于将样式作用在某个标签上（更有针对性）。
- 格式：
<!doctype html>
<html>
<head>
<title></title>
<style>
span{
color:blue;
}
.div1{
border:1px solid red;
background-color:yellow;
}
#div2{
border:1px solid black;
background-color:green;
}
</style>
</head>
<body>
<span>行内标签<span>
<div class="div1">块级标签1<div>
<div id="div2">块级标签2<div >
</body>
</html>
基本选择器的组合方式
-
层级关系
标签和标签之间有层级关系，例如<html>标签中的子标签为<body>标签。
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。- 格式：
选择器1 选择器2 ......{ /*css样式代码*/ }
- 格式：
<!doctype html>
<html>
<head>
<title></title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想火</font>
</div>
<font>我想火火不了</font>
</body>
</html>
css样式
边框属性
-
border
设置边框的样式- 格式：宽度 样式 颜色。
（例如：1px solid red -> 1像素粗 实线 红色边框）
- 格式：宽度 样式 颜色。
-
width
用于设置标签的宽度。 -
height
用于设置标签的高度。 -
background-color
用于设置标签的背景颜色。- 背景颜色设置的两种主流方式：
1.英文单词->例如：red;blue。yellow;
2.颜色代码->例如：#fff。(格式：#红绿蓝，每个颜色用两个16进制位数表示)
- 背景颜色设置的两种主流方式：
布局
-
float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方向式进行排版，就需要使用浮动属性。- 格式：
选择器{float:属性值;}
- 常用属性值：
none:元素不浮动（默认值）。
left：元素向左浮动。
right：元素向右浮动。
- 格式：
注意事项：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的版式），从而会影响其他元素的样式，所以设置浮动后，页面样式需要重新调整。
<!doctype html>
<html>
<head>
<title></title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html> 上一篇： 蔬菜汁怎么做？营养比炒菜更高！好处多多
下一篇： 人参的芦，你见过吗？知道它的价值吗？