day3-css常用属性

最新推荐文章于 2024-06-13 14:15:53 发布

Ra1nbowx

最新推荐文章于 2024-06-13 14:15:53 发布

阅读量337

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/xuzifengniubi/article/details/122291353

版权

一.css常用样式属性


<!-- 
    1. 常用样式属性
    1）font-size: 字体大小
    2）color: 字体颜色，颜色值：颜色英文单词(red)、十六进制颜色值(#FFB6C1)、rgb颜色(rgb(255,0,0)、rgba(255,0,0,0.3))
    3)font-family: 字体名称, font-family:字体1,字体2,字体3;
    4)font-weight: 字体粗细, 值是100 ~ 900
    5)font-style: 文字倾斜, italic/oblique/normal
    6)text-align: 水平对齐方式, left/right/center
    7)line-height: 行高
    8)text-decoration: 文字修饰, none/underline/overline/line-through
    9)letter-spacing: 字间距
    
    
    设置背景图:  background: url(图片地址) 平铺方式 x坐标 y坐标 背景颜色;
               平铺方式: no-repeat/repeat
               x坐标: 数值/left/right/center
               y坐标: 数值/top/bottom/center
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        
        <style type="text/css">
            #p1{
                font-size: 25px;
                color: rgb(155,190,8);
                font-family: "宋体", "楷体", "黑体";
                font-weight: 100;
                font-style: italic;
                text-align: center;
                line-height: 60px;
            }
            
            a{
                text-align: center;
                /* 去掉超链接默认的下划线 */
                text-decoration: none;
                
                /* 设置背景颜色 */
                background-color: #9ACD32;
            }
            
            #p2{
                text-decoration: line-through;
                letter-spacing: 10px;
            }
            
            ul{
                /* 去掉列表元素前的默认图标 */
                /* list-style-type: none; */
                
                /* 将指定图片作为元素前的图标 */
                list-style-image: url(img/f.png);
                list-style-position: inside;
            }
            
            #p3{
                width: 800px;
                height: 600px;
                background: url(img/luffy4.jpg) no-repeat center top rgba(255,0,0,0.5);
            }
            
            #p4{
                background: url(img/f.png) no-repeat 0 center rgba(0,0,0,0);
                padding-left: 40px;
            }
            
        </style>
	</head>
	<body>
        <p id="p1">我是段落11<br>我是段落22</p>
        <a href="">我是超链接1</a>
        <p id="p2">我是段落2</p>
        
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>H5</li>
            <li>UI</li>
        </ul>
        
        
        <p id="p3">hello world!</p>
        
        <p id="p4">hello</p>
	</body>
</html>

二.边框相关属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css"> 
           p{
               width: 200px;
               height: 100px;
               background-color: beige;
               
               /* 1. 同时设置四条边的边框
                border: 边框宽度 边框样式 边框颜色
                样式 - solid(实线)/dashed(虚线)dotted(点划线)double(双线)
                */
               /* border: 10px solid red; */
               
               /* 单独设置一条边 
                border-left: 边框宽度 边框样式 边框颜色
                border-right: 边框宽度 边框样式 边框颜色
                border-top: 边框宽度 边框样式 边框颜色
                border-bottom: 边框宽度 边框样式 边框颜色
               */
               border-bottom: 10px dotted red;
               border-top: 5px solid green;
               
           } 
           
           div{
               width: 300px;
               height: 300px;
               background-color: #9ACD32;
               
               /* 1.四个角一起设置圆角 */
               /* border-radius: 40px; */
               
               /* 2.单独设置某个角 */
               border-top-left-radius: 80px;
               border-bottom-right-radius: 80px;
           }
           
        </style>
	</head>
	<body>
        <p>我是段落1</p>
        
        <div id="">
            
        </div>
	</body>
</html>

三.index

<!-- 
1. 常用标签
 1）form标签
 2）input、select、textarea
 3）div
 
2. css语法
css - 层叠样式表(样式表、样式)
1）写在哪儿： 内联、内部、外部
2）怎么写
选择器{
    属性1:属性值1;
    属性2:属性值2;
    ...
}

标签/元素选择器:  标签名{}
id选择器: #id值{}
class选择器: .class值{}
群组选择器: 选择器1,选择器2{},...{}
子代选择器: 选择器1>选择器2>...{}
后代选择器: 选择器1 选择器2 ...{}
*{}
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!-- <input type="text" name="username" id="" value="小明" placeholder="手机号/邮箱" maxlength="10"/>
        <input type="password" name="psw" />
        
        
        <input type="radio" name="gender" id="g1" value="" checked="checked"/><label for="g1">男</label>
        <input type="radio" name="gender" id="g2" value="" /><label for="g2">女</label>
        
        <input type="checkbox" name="intr" id="i1" value="" checked="checked"/><label for="i1">篮球</label>
        
        
        <input type="button" name="" id="" value="确定" />
        <button type="button">取消</button>
        
        <input type="color" name="" id="" value="" />
        
        
        <select name="">
            <optgroup label="四川省">
                <option value="成都市">成都市</option>
                <option value ="绵阳市">绵阳市</option>
            </optgroup>
        </select>
        
        <textarea rows="3" cols="40" placeholder="请输入你的意见..." maxlength="200">无意见</textarea> -->
        
        <p class="c2">我是段落1</p>
        <p>我是段落2</p>
        <p class="c1">我是段落3</p>
        <a href="" class="c1 c2">我是超链接1</a>
        <a href="">我是超链接2</a>
        <a href="" class="c0 c1 c2">我是超链接3</a>
        
        <style type="text/css">
            .c1{
                color: red;
            }
            
            .c2{
               background-color: yellowgreen; 
            }
            
            /* 选中同时有c1和c2两个class属性值的标签 */
            .c1.c2{
                font-size: 30px;
            }
            
        </style>
        
	</body>
</html>

Ra1nbowx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day3-css常用属性

一.css常用样式属性<!-- 1. 常用样式属性 1）font-size: 字体大小 2）color: 字体颜色，颜色值：颜色英文单词(red)、十六进制颜色值(#FFB6C1)、rgb颜色(rgb(255,0,0)、rgba(255,0,0,0.3)) 3)font-family: 字体名称, font-family:字体1,字体2,字体3; 4)font-weight: 字体粗细, 值是100 ~ 900 5)font-style: 文字倾斜
复制链接

扫一扫