CSS的基本用法,了解这些可以试着美化一些自己写的前端页面

Java_小苏
98 阅读4分钟

一 、基本选择器

基本选择器

  • 元素选择器(就是标签名)

  • id选择器(属性名就是id)

  • 类选择器(属性名就是class)

1.1元素选择器

  • 元素选择器(标签名选择器)

  • 在head中使用style标签引入

  • 在其中声明元素选择器

html标签{
    属性:属性值
}

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

1.2 id选择器[常用]

  • 给需要修改样式的html元素添加ID属性标识

  • 在head中使用style标签引入

  • 在起中声明ID选择器

#id{
     属性:属性值
}

ps: 特别注意!是 #id

创建id选择器：
	<div id="s1">hello,everyone!</div>
	<div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
    </style>

1.3 class选择器[常用]

  • 给需要修改样式的html元素添加class属性标识
  • 在head中使用style标签引入
  • 在其中声明class选择器
.class名{
    属性:属性值
}
ps: 特别注意!!!! 是.class, 别忘了.

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

二 、属性选择器

  • 根据元素的属性及属性值来选择元素
  • 在head中使用style标签引入在其中声明
htm标签[属性='属性值']{
   css属性:css属性值;
}

html标签[属性]{
    css属性:css属性值;
}

body内容：
	<form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
		<font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
	</form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
	</style>

三 、CSS属性

3.1文字属性

属性名描述取值
font-size设置字体大小(像素/百分比)数值
font-family设置字体样式默体 宋体 楷体等
font-style设置斜体样式normal正常;italic斜体;
font-weight粗体样式100~900数值;bold;bolder

3.2文本属性

属性名描述取值
color十六进制;表示颜色的英文单词;设置文本颜色
text-indent缩进元素中文本的首行5px缩进5像素;20%缩进父容器宽度的20%
text-decoration文本的装饰线none;underline;overline;blink;line-through
text-align文本水平对齐方式left;right;center
word-spacing英语单词之间的间隔,得有空格normal;固定值;像素
line-height设置文本的行高normal;固定值;像素

3.3背景属性

属性名描述取值
background-color设置背景色16进制;用于表示颜色的英语单词;
background-image设置背景图片url('图片路径')
background-repeat设置背景图的平铺方向repeat-y;repeat-x;repeat;no-repeat;
background-position改变图象在背景中的位置top;bottom;left;right ; center;
background-size设置图片大小像素;百分比

3.4列表属性

属性名描述取值
list-style-type改变列表的标识类型disc等
list-style-image用图像表示标识url("图片地址")

3.5尺寸属性

  • width:设置元素的宽度,单位px%

  • height:设置元素的高度,单位px%

3.6显示属性

显示属性dispaly,以下是常用取值

  • none:不显示,即隐藏了

  • bloke:块级显示,占一行

  • inline:行级显示,占部分

3.7定位属性

使用的是css属性position,属性值有

  • relative(相对)

  • absolute(绝对)

  • fixed(固定)

使用了定位属性后,才可以使用top,bottom,left,right这些属性

四 、css盒子模型

主要作用为了布局,就是调整位置,根据相邻调整使页面看起来更美观

盒子模型图 在这里插入图片描述

  • 关于内外边距的解释
  • 内边距:内边距是指元素到边框的距离
  • 外边距:外边距是指边框到浏览器页面的距离

4.1 边框相关属性

属性名描述取值
border-style设置边框的样式solid;double;dashed;dotted等
border-color设置边框颜色16进制;用于表示颜色的英文;
border-width设置边框的粗细数值
border同时设置粗细,颜色,尺寸

4.2 外边距相关属性

margin: 外间距,边框和边框外层的元素的距离

属性名描述取值
margin四个方向的距离top;right;bottom;lrft
margin-top上间距数值
margin-bottom下间距数值
margin-left左间距数值
margin-right右间距数值

4.3 内边距相关属性

padding: 内间距,元素内容和边框之间的距离(top right bottom left)

属性值描述取值
padding-left左间距数值
padding-right右间距数值
padding-top上间距数值
padding-bottom下间距数值
padding四个方向的距离left;right;top;bottom
avatar
文章
阅读
粉丝