css学习

最新推荐文章于 2024-09-05 23:48:57 发布

醉美的自己

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量79

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_43661378/article/details/106461136

版权

一、CSS思维导图
在这里插入图片描述
二、内嵌CSS实例
核心;style标签对中使用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内嵌css</title>
		<style type="text/css">
			input{
				font-size:12px;
				color:black;
				text-align: center;
				/*text-align用于设置文本在文本框中的位置*/
				background-color: blanchedalmond;
			}/*标签选择器*/
			.aa{
				width:100px;
				height:50px;
				color:red
			}/*类型选择器*/
		/*类型选择器的权重大于标签选择器*/	
		</style>
	</head>
	<body>
		<img src="01.jpg" align="baseline" title="百度一下，你就知道"/>
		<!--    absmiddle       图片中间与同一行最大元素中间对齐；
        absbottom       图片下边缘与同一行最大元素下边缘对齐；
        baseline        图片下边缘与第一行文本下边缘对齐；
        bottom          图像下边缘与第一行文本下边缘对齐；
        left            图像沿网页左边缘对齐，文字在图像向右边换行；
        middle          图像中间与第一行文本的下边缘对齐；
        notset          未设定对齐方式；
        right           图像沿网页的右边缘对齐，文字在图像左边换行；
        texttop         图片上边缘与同一行最高文本上边缘对齐；
        top             图片上边缘与同一行最高元素上边缘对齐。-->
		<br />
		<br />
		<br />
		用户:  <input type="text" class="aa" name="user" placeholder="张三"/>
		<!--placeholder用于设置默认显示一段灰色文字，光标点在文本框内时，将处在文本框的最左端-->
		<br/>
	        <br/>
			密码:  <input type="password" class="aa" name="password"  value=123456/>
			<!--
            	当属性值为数字时，引号可以省略
            -->
			<br/>
	        <br/>
			性别:  <input type="radio" name="xingbie" checked/>男
			<input type="radio" name="xingbie"/>女
			<br/>
	        <br/>
	            爱好:  <input type="checkbox" checked/>篮球
	            <input type="checkbox" />足球   
	            <input type="checkbox" />绘画
	            <input type="checkbox" />跳舞
	        
	        <br /><br />
	        请输入自我介绍：
	        <textarea name="##" rows="5" cols="30" >我是张三</textarea>
	        <br /><br />
	        邮箱：
	        <select name="">
	        	<option value="163.com">163.com</option>
	        	<option value="126.com">126.com</option>
	        	<option value="qq.com">qq.com</option>
	        </select>
	        <br /><br />
	        <input type="reset" value="重置" />
	        <br /><br />
			<input type="submit" value="提交" />
	</body>
</html>

在这里插入图片描述
三、外链css
展示结果如上所示：
核心在于：使用link单标签建立当前css文件与html文件之间的联系

``` CSS代码 ```css input{ font-size:12px; color:black; text-align: center; /*text-align用于设置文本在文本框中的位置*/ background-color: blanchedalmond; }/*标签选择器*/ .aa{ width:100px; height:50px; color:red; }/*类名选择器*/ ``` 四、行内css **行内css的核心:当想为某元素设置样式，仅需要为该元素添加属性style，style属性值为css的样式，注意：样式之间不能手动换行，可以再工具栏窗口（视图-》自动换行）实现换行。** ```html 行内CSS 百度一下，你就知道