[19/05/19-星期日] CSS_css的声明和选择器

最新推荐文章于 2020-05-21 17:08:58 发布

weixin_30847939

最新推荐文章于 2020-05-21 17:08:58 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/ID-qingxin/p/10891156.html

版权

一、引言

　HTML的作用是负责数据的格式展示，如果使用它来搞数据的样式，则发现样式书写出来太麻烦，不易于维护；

　HTML可以有效组织数据的展示，但是不同类型数据在浏览器中的分布没有办法展示。

　HTML的核心功能就类似于书架，核心就是放置书本，管他外观好看不好看。至于书架的样式可以专门使用CSS来做，当然HTML也可以做，但是太麻烦。

但是注意CSS不能脱离HTML使用

二、基础

　CSS：Cascading Style Sheets 层叠样式表。

　作用：给网页进行样式的开发，给网页进行布局

特点：语言简单，样式可以重复使用，依赖于HTML

(1)CSS的声明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的声明学习</title>
        <!--声明css的代码域，因为一个网页中有2种语言，要告诉浏览器哪个地方要用css解析 类似于函数使用要先声明或导入jar包
            1、在head标签中使用style属性声明   当前网页公共样式 其实在任意位置都行，只是方便阅读
            2、在标签中使用的style属性中声明   当前网页的某个特殊标签 只在这个标签有效
            3、在head标签使用link标签引入外部声明好的css文件 相当于调用或导入
            如果单独写个css文件直接写hr中内容即可 不用写style标签
      样式执行顺序：css的样式声明全部写在head标签中
        标签距离哪个样式近，标签就使用哪种样式 比如第2个hr 它离引入的外部标签就他就是外部的样式显示的黑色
          自定义属性肯定最后执行      
            
        -->
        <style type="text/css">
            hr{ /*在head标签中是公共代码域,如果想要个性 可以在下边使用style属性自定义*/
                width: 100px;
                height: 10px;
                background-color:red;
            }
        </style>
        <link rel="stylesheet" href="mycss.css" /> <!--引入外部css样式-->
    </head>
    <body>
        <h3>css的声明学习</h3>
        <hr  style="background-color:blue;"/> <!--这里就是使用上边定义好的样式 +自定义的属性 只在这个标签中有效-->
        <hr />
        
    </body>
</html>

hr{
                width: 100px;
                height: 10px;
                background-color:black;
   }

(2)CSS的选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的选择器</title>
        <style type="text/css">
            /*1、标签选择器: 标签名{样式1,样式2....} 作用给网页中的所有标签设置这样的样式
              2、id选择器：#id号{单独的样式1，样式2....} 给某个标签加自己的样式
             *3、类选择器： .类选择器的名{样式1，....} 解决不同标签使用相同的样式的问题
             *4、全部选择器： *{样式1,....}  选择所以的标签并添加相同的样式
             *5、组合选择器：如：table, .common{样式1，样式2....}  选择器1，选择器2{ }解决不同选择器中间的重复问题
             *6、子标签选择器  选择器1 子标签选择器{样式1，....}
             *7、属性选择器  标签名[属性名=属性值]{样式1...} 设置某个标签的某个属性的样式
             * 一般：
             * 使用4、全部选择器 来给整个页面加样式
             * 使用3、类选择器  给不同标签加基础样式
             * 使用1、标签选择器 来给某类标签加样式
             * 使用2、id选择器 7 属性选择器 或style属性声明给某个标签添加个性化
             * 书写样式单：
             * 1、边框设置 border:solid(实线) 1px
             * 2、字体设置   
             * 设置大小: font-size:10px; 设置格式 font-family："黑体"
             * 设置效果：font-weight：bold(加粗); 
             * 字体颜色设置  color:颜色;
             * 3、背景颜色设置  background-color：颜色
             * 背景图片设置  background-img：图片的路径 url
             *             background-repeate：no-repeate 设置图片不重复
             *             background-size：cover 图片平铺整个页面
             * 4、高和宽 
             * 浮动设置 float：left|right
             * 行高的设置 line-height：10
             * */
            table{ /*给以下所有的table这样设置*/
                width: 300px;
                height: 200px;
                border: solid 1px;
            }
            #t1{  /*id选择器*/
                background: red;
            }
            .common{/*类选择器*/
                color: blue;
            }
            ul li a {/*子标签选择器  给所有的类似标签设置样式*/ 
                color: green;
            }
            #p1{ /*如果不想所以的子标签使用一样的样式 可以设置id 用#id名 单独设置*/
                color: yellow;
            }
            input[type=text]{
                background: red;
            }
        </style>
    </head>
    <body>
        <h3>css的选择器</h3>
        <hr />
        <table id="t1" class="common">
            <tr>
                <td>李白</td>
                <td>13岁</td>
                <td>教师</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table id="t2">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <p class="common">css使用</p>
      <ul id="u1">
          <li ><a href="">哈哈 </a></li>
          <li><a href="">嘿嘿 </a></li>
          <li><a href="">呵呵 </a></li>
      </ul>
      <ul id=u2>
          <li ><a href="">呵呵 </a></li>
          <li><a href="">干嘛 </a></li>
          <li><a href="">在洗澡 </a></li>
      </ul>
      <p id="p1">尼玛</p>
      <p id="p2">卧槽</p>
      用户：<input type="text" name="uname" value=""/>
      密码：<input type="password" name="pwd" value=""/>
    </body>
</html>

样式使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的样式</title>
        <style type="text/css">
            /*使用标签选择器*/
            /*添加网页背景图*/
            body{
                /*background-image: url(../img/2.jpg);*/
                background-size: cover; /*图片平铺*/
                /*background: repeat no-repeat;/*设置图片不重复*/
                
                
                
            }
            table{
                border: solid 1px;
                
                
            }
            /*设置table表格的行高*/
            tr{ /*行*/
                height: 40px;
                
            }
            td{/*单元格*/
                width: 120px;
                border: solid 1px; /*边框的效果*/
                border-radius: 10px;  /*设置边框的角度*/
                background-color:orange ;
                text-align: center; /*文本位置：居中*/
                color: palegreen; /*字体颜色*/
                font-weight: bold; /*字体效果：加粗*/
                letter-spacing: 2px; /*字体之间的距离*/
            }
            /*菜单的设置 去掉黑点*/
            li{
                list-style-type:none ; /*去前边的黑点*/
                
                /*display: inline;*/
                float: left;  /*跟上边的效果一样 设置菜单左悬浮*/            
            }
            li a{
                color: black;
                text-decoration: none;/*去除文本的下划线*/
                font-size: 20px;
                margin-left: 20px; /*每个超链接之间设置间距*/
                position: relative;
                top: 10px;
            }
            ul{
                background-color: orange;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <hr />
        <table>
            <tr>
                <td >姓名</td>
                <td>性别</td>
                <td>爱好</td>
            </tr>
            <tr>
                <td>王维</td>
                <td>男</td>
                <td>作文</td>
            </tr>
            <tr>
                <td>李白</td>
                <td>男</td>
                <td>喝酒</td>
            </tr>
        </table>
        <hr />
        <ul>
            <li><a href="">首页 </a></li>
            <li><a href="">机构设置</a></li>
            <li><a href="">领导介绍</a></li>
            <li><a href="">校园生活</a></li>
        </ul>    
        
    </body>
</html>

简单照片墙

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 照片墙</title>
        <style type="text/css">
            img{
                width: 15%; /*设置宽度*/
                
                border: solid 1px red;
                padding: 10px; /*设置内边距*/
                background-color: white;
                transform: rotate(-10deg);/*正数:顺时针 负数:逆时针 旋转多少度*/
                margin: 20px;
            }
            body{
                text-align: center;    
                background-color: gray;            
            }
            /*使用伪类标签各图片加样式*/
            img:hover{ /*设置鼠标悬停效果 图片转正 图片放大1.5倍 */
                border: solid 2px red;
                transform: rotate(0deg) scale(1.5);
                z-index: 1; /*设置显示优先级别*/
                transition: 2s;/*设置图片显示加载的时间*/
            }
        </style>
    </head>
    <body>
        <img src="../img/chen (1).jpg" alt="" />
        <img src="../img/chen (2).jpg" alt="" />
        <img src="../img/chen (3).jpg" alt="" />
        <img src="../img/chen (4).jpg" alt="" /> <br />
        <img src="../img/chen (5).jpg" alt="" />
        <img src="../img/chen (6).jpg" alt="" />
        <img src="../img/chen (7).jpg" alt="" />
        <img src="../img/chen (8).jpg" alt="" />
    </body>
</html>

CSS

转载于:https://www.cnblogs.com/ID-qingxin/p/10891156.html

weixin_30847939

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[19/05/19-星期日] CSS_css的声明和选择器

一、引言　HTML的作用是负责数据的格式展示，如果使用它来搞数据的样式，则发现样式书写出来太麻烦，不易于维护；　HTML可以有效组织数据的展示，但是不同类型数据在浏览器中的分布没有办法展示。　HTML的核心功能就类似于书架，核心就是放置书本，管他外观好看不好看。至于书架的样式可以专门使用CSS来做，当然HTML也可以做，但是太麻烦。但是注意CSS不能脱离HTML使用二、基础...
复制链接

扫一扫